Compassでスプライト画像の幅と高さを取得する方法

 Compassでスプライト画像の幅と高さを取得する方法

こんにちは、@cappeeです。

今回はSass(SCSS)+Compassを使ったスプライト画像についてです。

スプライト画像全体の幅(width)、高さ(height)を取得する方法についてピンポイントでご紹介したいと思います。

なぜピンポイントかと言いますと、私がRetina対応のmixinを作成している時、これを探すのにちょいと苦労したからですね。

background-size を指定する時にスプライト画像全体のサイズを取得する必要がありました。

コピペで使える系の記事を参考に見てみても、background-sizeの幅の指定だけは手動で入力するmixinがほとんどだったんですね。

こんな感じで。

@include background-size(500px auto);

スプライト画像はCompassさんが自動でつくってくれるのだから個別の画像が増えればスプライト画像のサイズだって都度変わるのに、毎回変更しないといけないの…(゚д゚)!?

いいえ、そんなことありません!!

こんなに便利なCompassだからスプライト画像のサイズを自動で取得できるはず!と思っていろいろと入らべてみたら辿り着きました( ;∀;)

これでRetina対応が楽になりますね。

スプライト画像全体の幅と高さを取得する

sprite-path()関数でスプライト画像全体の幅と高さを取得することができます。

幅(width)

image-width(sprite-path($replace))

高さ(height)

image-height(sprite-path($replace))

このsprite-path()関数ですが、Compass公式サイトのCSS Sprite Helpersを見ても掲載されてないんですよね。なぜー。

Retina対応したスプライト画像のmixin

background-sizeには上記のsprite-path()関数を使います。
Retina対応したスプライト画像のmixinはこれを応用して下記のようになります。

@mixin sprite-background($name) {
  width: image-width(sprite-file($replace, $name)) / 2;
  height: image-height(sprite-file($replace, $name)) / 2;
  $xpos: round(nth(sprite-position($replace, $name), 1) / 2);
  $ypos: round(nth(sprite-position($replace, $name), 2) / 2);
  background-image: $replace-img;
  background-position: $xpos $ypos;
  background-repeat:no-repeat;
  $wbgz: image-width(sprite-path($replace)) / 2;
  @include background-size($wbgz auto);
}

Retina対応したスマートフォンサイト用mixinはこちらで詳しく説明していますのでぜひ参考にしてみてください。
Retina対応したスプライト画像のmixin

いかがでしたでしたか?
mixinを使えばコーディングがスピードアップ!

間違いやもっと良い方法があるという方はお気軽にコメントください。

Sassの教科書も必読ですよ。

Pocket
article clipper Compassでスプライト画像の幅と高さを取得する方法

[Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

残暑お見舞い申し上げます、@cappeeです。

おひさしブリーフ。

さて、以前「Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ」という記事を書かせていただきました。

実際にサイト制作に導入して四苦八苦しながらどうやったら効率的にスマートなコーディングができるか、2ヶ月いじってやっとこさ納品しました。

そこで今回は、私なりに効率化するために記述したmixin、変数、CSSスプライトなど便利な指定方法を惜しげもなく公開したいと思います。(大げさ)

[最新版]mixin集の最新版を公開しているのでこちらもご覧ください!
[Sass]泣くほど早い…今すぐ使える便利なmixin集

記述はSCSSです。

サイトやデザインによって記述すべき指定は異なるかと思いますので、参考にでもしていただけたらなと思います。

Compass Home Compass Documentation 300x241 [Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

最初の記述

文字コード

まずはSass(SCSS)ファイルの最初に文字コードを指定します。

@charset "utf-8";

Compass

Compassを使う場合は下記の記述で呼び出します。Compassを使うには別途インストールが必要になりますので詳しくは「Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ」をご覧ください。

@import "compass";

IE9でのグラデーション表示

IE9でグラデーションを表示させるためにSVGを利用します。IE9はSVGの表示には対応しているので、background-imageをincludeした時に、自動的にSVGを出力してくれる下記の記述をしておくととても便利です。
こちらの記事で詳しく書かれています。「IE9でも複雑なグラデーションを利用する
ただ、IE9での見た目より読み込みスピード重視だという場合は、指定しない方がいいかと思います。

$experimental-support-for-svg: true;

mixin

グラデーション

フラットデザインが話題ではありますが、実際にはグラデーションもよく使用しますので、その記述を簡単にするmixinです。
明るい色から暗い色へ上下に変化するグラデはよく使うと思います。
その際グラデの明るい色と暗い色の2つを指定するのは面倒なので、暗い色の1色だけを()内で指定して、明るい色はlightenで指定します。
指定した色をどのくらい明るくするか、パーセントで記述すれば1色だけの指定で済むのでとても便利です。
逆にdarkenを使用して明るい色をどのくらい暗くするかを指定するのでもOKです。
一番最初にbackground-colorを指定しているのはグラデが使えないIE用の指定になります。

@mixin gradient-top-lighten($color:#E8E8E8, $lighten:7%){
background-color: $color;
@include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}

.selecta {
@include gradient-top-lighten(#EEE, 3%);
}

テキストシャドウ

ボタンなど白文字には黒を透過したシャドウをかけていたので、デフォルトの指定をこのmixinに変更しました。
黒文字に白のシャドウを入れる場合は、includeで@include text-shadow($white, 1);を指定すればOKです。

@mixin text-shadow($color:#000, $op:.4){
text-shadow: 0 1px 0 rgba($color, $op);
}

.selecta {
@include text-shadow;
}

ボタンの基本デザイン

ボタンはページやコンテンツによって色やサイズは変更すると思いますが、基本のデザインは一緒なので、一緒の部分はmixinで指定すると便利です。
下記は一例なのでサイトのデザインに合わせて変更してください。

@mixin btn-base{
@include border-radius(3);
@include box-sizing(border-box);
font-weight: bold;
text-decoration: none;
text-align: center;
width: 126px;
line-height: 25px;
}

.selecta {
@include btn-base;
}

フォントサイズ

今まで相対指定の%やemを使用していましたが、親要素を継承しないCSS3のrem指定の方が便利なのでremを使ったフォントサイズを指定するためのmixinです。
こちらの記事に詳しく書かれています。「CSS3の新単位remで、文字サイズの指定を分かりやすく
ただ、IE8以下では使用できないので対応ブラウザ次第ではpx指定も記述する必要があります。

@mixin font-size($size, $base: 16) {
font-size: $size + px;
font-size: ($size / $base) * 1rem;
}

.selecta {
@include font-size(14);
}

ポジション

結構positionを使うのでmixinを用意してみました。そこそこ便利だと思います。

@mixin abs-top-left ($top: 0, $left: 0) {
position: absolute;
top: $top + px;
left: $left + px;
}
@mixin abs-top-right ($top: 0, $right: 0) {
position: absolute;
top: $top + px;
right: $right + px;
}

.selecta {
@include abs-top-right(4, 10);
}

画像置換

私はLIR(Leahy/Langridge Image Replacement[リーフィー/ラングリッジ式画像置換])という画像置換の方法を採用しているので、CompassのCSSスプライトでbackgroundは自動で読み込めますが、それ以外のプロパティの指定が面倒だったのでこのmixinを作りました。
CompassのCSSスプライトの指定に関しては下で説明していますが、それが記述されている前提のmixinになりますのでご注意ください。

また、下記はLIRになりますので、それぞれが採用している画像置換の方法に変更して使用してみてください。
こちらで紹介されているtext-indent: 100%;を使う方法もオススメです。「画像置換「-9999px」のパフォーマンスを改善した新しいテクニック

@mixin bg-lir($name) {
width: image-width(sprite-file($icons, $name));
padding-top: image-height(sprite-file($icons, $name));
line-height: image-height(sprite-file($icons, $name));
height: 0;
overflow: hidden;
}

.selecta {
@include bg-lir(file-name);
}

角丸

かなり几帳面な人向けのmixinになります。。
border-radiusはmixinで指定しなくてもincludeできるのですが、数字を指定する時に(3px)などとpxを指定する必要があったので()内でpxを省いて数字だけ入力できるようなmixinもあるとちょっとだけ効率的になるかな?
※50%というようなパーセント指定をしたい場合はこのmixinを使わないでください!

@mixin border-radius($radius) {
-moz-border-radius: $radius + px;
-webkit-border-radius: $radius + px;
-o-border-radius: $radius + px;
-ms-border-radius: $radius + px;
border-radius: $radius + px;
}

.selecta {
@include border-radius(3);
}

変数

主要な色

変数には主にカラーなどを指定すると便利です。

$black:#333;
$white:#FFF;
$gray:#666;
$green:#4C9020;
$blue:#0467AF;
$pink:#DF5291;
$yellow:#E1930F;
$orange:#D5530A;

.selecta {
color: $gray;
}

明度の指定

明度の異なるカラーを使う場合も多いので、lightendarkenを利用するのが便利です。

$green-dark:darken(#4C9020, 6%);
$blue-dark:darken(#0467AF, 6%);
$pink-dark:darken(#DF5291, 6%);
$yellow-dark:darken(#E47301, 6%);
$orange-dark:darken(#D5530A, 6%);

CSSスプライト

自動インポート

CSSスプライトにしたい複数の画像を特定のフォルダに書き出し、下記のように記述すればCSSスプライト用の画像やbackground,background-positionを自動で出力してくれるのでとてつもなく便利です。
記述方法などはこちらに詳しく書かれています。必読です。「CSSの常識が変わる!「Compass」、基礎から応用まで!

$icons-spacing: 50px;
@import "icons/*.png";
@include all-icons-sprites;

手動で指定

上記の自動インポートは非常に便利ですが、アイコンなどの場合background-positionを微調整したりpaddingをプラスで指定したいケースが実際はほとんどです。
下記のsprite-mapはbackgroundのみ出力してくれて、background-positionなどそれ以外のプロパティは手動で指定するという指定です。
このへんが歯がゆいですよね。便利すぎるゆえにCompassへの要求は増えワガママになっている自分…

$icons: sprite-map("icons/*.png", $spacing:50px);

手動での指定ですが、paddingは属性セレクタで指定すると便利です。(IE7以上)
background-positionですが、テキストのフォントサイズによってアイコンの縦位置を微調整したい時など、デフォルトの指定からどのくらいpxを移動したいかを演算で調整できるので便利です。
スプライト画像が変更したとしてもこれで無問題!

[class^="icons"]{
padding-left:15px;
}
.icons-arrow {
background-position: 0 nth(sprite-position($icons, arrow), 2) + 3;
}

私は今回のサイト制作で大蛇区をして自動インポートと手動の両方を指定しました。
余計なコードは増えますが作業効率は多少上がるのでどっちをとるかですね。

また、今回ご紹介したmixin、変数などの指定は上の方に記述しないと適用されないのでご注意ください。

いかがでしたか?

コーディングはできる限り効率化して勉強の時間を増やしたいものです!

こちらの記事も参考にさせていただきましたのでご紹介します。
より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集

Sassの本がついにでました!かなりオススメです。

Pocket
article clipper [Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!