• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

CompassによるCSSスプライト作成 -その2-

2018-04-11 by mocurot コメントを書く

CompassのCSSスプライト機能をミックスインにする場合はスプライト関数を使用する。これでCSSスプライトのいろいろな値を取得、組み替えができる。

スプライト関数

スプライト関数にもいろいろな種類がある。ここでは主に使用するスプライト関数を紹介する。

prite-map()関数

sprite-map("<map>/*.png", $spacing, $position, repeat, $layout )

CSSスプライト用画像の生成、戻り値は画像のURL。「CompassによるCSSスプライト作成 1」で使用した@import “< map >/*.png”; をsprite-map関数にしたもの。


sprite()関数

sprite(<map>, <sprite>)

背景画像パスと位置を取得。


sprite-file()関数

sprite-file(<map>, <sprite>)

結合前の画像情報を取得。CSSスプライトではimage-width()関数、image-height()関数などと組み合わせて元画像のwidthやheightを取得する。

//結合前の画像からwidthを取得
image-width(sprite-file(<map>, <sprite>))
//結合前の画像からheightを取得
image-height(sprite-file(<map>, <sprite>))

sprite-position()関数

sprite-position(<map>, <sprite>)

背景位置を取得。nth()関数で縦・横のサイズを個別に取得してもいい。

スプライト関数を組み合わせる

紹介したスプライト関数を組み合わせてCSSスプライトのボタンを作ってみる。ボタン用の画像とファイル構成は「CompassによるCSSスプライト作成 1」で使用したものを流用する。

Sass

@import "compass";
$map: sprite-map("icon/*.png", $spacing: 20px, $layout: horizontal);//sprite-map()関数

.youtube {
  background: sprite($map, sns03);//sprite()関数
  width: image-width(sprite-file($map, sns03));//image-width()関数
  height: image-height(sprite-file($map, sns03));//image-height()関数
  background-position:sprite-position($map, sns03);//sprite-position()関数
  &:hover {
    //nth()関数を利用して縦・横を別々に呼び出す
    background-position:
      nth(sprite-position($map, sns03_hover), 1)
      nth(sprite-position($map, sns03_hover), 2);
  }
}

ここで指定した<sprite>は「sns03」。images/icon/sns03.pngを指している。

CSS

.youtube {
  background: url('images/icon-s2d341d8611.png') -480px 0;
  width: 100px;
  height: 100px;
  background-position: -480px 0;
}
.youtube:hover {
  background-position: -600px 0;
}

HTML

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CompassによるCSSスプライト作成</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="youtube"></div>
</body>
</html>

「CompassによるCSSスプライト作成 1」と同様に、ボタンが表示されているのが確認できた。

スプライト関数ををミックスインにする

スプライト関数でさまざまな値の取得、組み替えができることを確認したのでミックスインにしてみる。

Sass

@mixin sprite-bg($sprite) {
  background: sprite-url($map)  no-repeat;
  background-position:sprite-position($map, $sprite);
  width: image-width(sprite-file($map, $sprite));
  height: image-height(sprite-file($map, $sprite));
  &:hover {
    background-position:
    nth(sprite-position($map, unquote("#{$sprite}_hover")), 1)
    nth(sprite-position($map, unquote("#{$sprite}_hover")), 2);
  }
}

.tumbler {
  @include sprite-bg(sns05);
}

作成したミックスインに引数「sns05」を持たせて、tumblerクラスにインクルードしてみた。
※hover時のpositionを取得するため、:hover内の$spriteをunquote(“#{$sprite}_hover”)に整形した。

HTML

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CompassによるCSSスプライト作成</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="tumbler"></div>
</body>
</html>

ミックスインに渡した引数「sns05」から、sns05.pngの情報が参照されてtumblrのボタンが作成された。


Compassスプライトで、ページ読み込みの高速化と作業時間の軽減を!

関連

Filed Under: Sass 関連タグ:SASS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
mocurot noteの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • Sassの初期設定〜コンパイル
    Sassの初期設定〜コンパイル
  • ios safariでのスクロールバー表示について
    ios safariでのスクロールバー表示について
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • Sassのフレームワークあれこれ
    Sassのフレームワークあれこれ
  • Sassで@import
    Sassで@import
  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -

タグ

AMAZON ANKER APPLE APPLE WATCH APPS BLOOD BONE CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET EMMET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC MUSIC NGINX NINTENDO NODE.JS NOTE PHP PS4 PYTHON SASS SCSS SEKIRO SERVER SWICH WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン