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でスプライト画像の幅と高さを取得する方法

[決定版]Retina対応したスプライト画像のmixin

 [決定版]Retina対応したスプライト画像のmixin

こんにちは、@cappeeです。関東も大雪でしたね(・∀・)

現在がりがりっとスマートフォンサイトのコーディングに勤しんでいます。

以前Sass+Compassを使った泣くほど早いmixin集を公開しましたが、スマホだとRetina対応があるためSprite画像を使ったmixinは変更する必要があります。

色々とRetina対応したmixinの記事を拝見させていただきましたが、background-sizeを毎回手動で入力する必要があったりと以外と「これだっ!」と思うmixinがなく。。

Compassの公式サイトや色んな角度から検索して参考にした結果、個人的には「これが決定版だ!」と思えるmixinができました!!!

CSS Spriteの設定

※こちらはCompassのスプライト初心者向けですのでわかる方はスルーしてください!

スプライト画像を使ったCSSの指定には主に以下の3つがあると思います。

  1. 文字の背景で表示する画像
  2. 文字を置換する画像
  3. アイコンの画像(文字の左側に配置)

私は(1)文字の背景で表示する画像と(2)文字を置換する画像を「replace」フォルダに書き出し、(3)アイコンの画像を「icon」フォルダに書き出しています。フォルダ名は任意です!

何はともあれCSS Spriteにしたい画像をそれぞれ書き出します。

書き出したらSass(SCSS)ファイルにスプライト画像を生成してくれる魔法の言葉を書き出します。

(1)(2)はスプライト画像のレイアウトを「$layout: smart」にして余白なく画像を配置するように指定します。
なぜなら画像サイズが大きくなりすぎるとiOSで表示の制限がかかるからです。
3メガピクセル以上の画像は縮小されて表示されるので気をつけましょう。
ただし、「$layout: smart」にするとブラウザでサイトを縮小して見た場合に隣の画像が1px見えてしまうこともあります。
画像サイズの制限に気をつけつつ、デフォルトの縦方向に並べる「vertical」で「$spacing:10px」と指定する方が無難かも?

$replace: sprite-map("sp/replace/*.png", $layout: smart);
$replace-img: sprite-url($replace);

(3)アイコンの画像は上下にある程度の余白が必要なため、「$spacing:100px」などある程度のスペースを指定しておきます。

$icon: sprite-map("sp/icon/*.png", $spacing:100px);
$icon-img: sprite-url($icon);

マジックインポートというCSSスプライト用の画像だけでなくbackground,background-positionを自動で出力してくれる機能もあります。実際はbackground-position,width,heightなど変更したい場合が多いので sprite-map を使ってセレクタごとに指定します。

Retina対応mixin

(1)文字の背景で表示するスプライト画像

@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);
}

width: image-width(sprite-file($replace, $name)) / 2;
Retina用に書きだした画像の横幅を取得して半分のサイズを出力します。heightも同じくです。

$xpos: round(nth(sprite-position($replace, $name), 1) / 2);
スプライト画像のポジションを取得して変数にいれます。
nthでポジションの何番目を取得するかを指定します。1はX軸、2はY軸です。
round関数を指定しておくと割算ででた小数点以下を四捨五入してくれます。

$wbgz: image-width(sprite-path($replace)) / 2;
background-size用にスプライト画像全体の横幅を取得し、半分のサイズを変数にいれます。

以下のように任意のセレクタでincludeして使ってください。

.selector {
  @include sprite-background(filename);
}

(2)文字を置換する画像

@mixin sprite-replace($name) {
  @include sprite-background($name);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

上の(1)をまるっとincludeして、文字を隠すプロパティだけ指定すればOKです。

(3)アイコンの画像

@mixin sprite-icon($name, $x: 0, $y: 0, $pl: 4) {
  $xpos: round(nth(sprite-position($icon, $name), 1) / 2);
  $ypos: round(nth(sprite-position($icon, $name), 2) / 2);
  background-position: ($xpos + $x) ($ypos + $y);
  $wbgz: image-width(sprite-path($icon)) / 2;
  @include background-size($wbgz auto);
  padding-left: (image-width(sprite-file($icon, $name)) / 2) + $pl;
}

background-position: ($xpos + $x) ($ypos + $y);
上と同じく画像のポジションを取得して変数にいれた後、位置を微調整できるようにしておきます。
アイコン画像は特にY軸を調整したい時が多いのでこの指定は必須ですね。

padding-left: (image-width(sprite-file($icon, $name)) / 2) + $pl;
アイコン左側のpadding-leftも自動で計算します。
デフォルトはアイコン画像の幅の半分に、4px分プラスして出力されます。
ただデザインによっては調整したい場合もあるので手動でもpadding-leftを指定できるようにしています。includeした際に$plが指定されていれば、指定されたpxが出力します。
[追記]px数もアイコンごとに調整できるように変更しました!

以下のように任意のセレクタでincludeして使ってください。
アイコンはclass名を「icon-xx」と先頭部分を共通化し、属性セレクタでスプライト画像のパスを指定すると便利です。
class名を共通化できない場合は、下記で記述したようにextend化してmixinにしてもOKです。

[class*="icon-"]{
  background-image: $icon-img;
  background-repeat: no-repeat;
}
.icon-home {
  @include sprite-icon(home);
}
.icon-li {
  @include sprite-icon(li, 0, 2, 6);
}

extend

(1)(2)で指定した以下の共通プロパティはextend化して、複数のセレクタでプロパティをまとめて指定することもできます。

extend

%sprite-background {
  background-image: $replace-img;
  background-repeat:no-repeat;
}
%sprite-replace {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

(1)文字の背景で表示するスプライト画像のmixin

@mixin sprite-background($name) {
  @extend %sprite-background;
  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-position: $xpos $ypos;
  $wbgz: image-width(sprite-path($replace)) / 2;
  @include background-size($wbgz auto);
}

(2)文字を置換する画像のmixin

@mixin sprite-replace($name) {
  @include sprite-background($name);
  @extend %sprite-replace;
}

extendを使うとどうしてもセレクタの数が増えてしまいます。IE9以下では1つのCSSファイルにつき4,095個までしかセレクタを認識しないという制限がありますので気をつけましょう。

いかがでしたでしょうか?
このmixinでスマホサイトのコーディングが少しでも早くなれば嬉しいです!

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

上記以外のmixinはこちらにもまとまってます(*´ω`*)
Sass+Compassを使った泣くほど早いmixin集

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

Pocket
article clipper [決定版]Retina対応したスプライト画像のmixin

[Sass]泣くほど早い…今すぐ使える便利なmixin集

 [Sass]泣くほど早い…今すぐ使える便利なmixin集

こんにちは、@cappeeです。

本格的にSass(SCSS)を仕事で使うようになってから早半年。

色々と試行錯誤しながら効率的にコーディングできるように工夫してきましたが、やっとこさある程度カタチになってきました。

これからSassを導入するというデザイナーさんもいるかと思うので、コピペで今すぐ使える便利なmixinをまとめて公開したいと思います。

泣くほどコーディングが早くなりますよ。

※Sass+Compassのインストールがまだの方はこちらをご覧ください!
Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

フォントサイズ

CSS3の新しい単位 rem でフォントサイズを指定するmixinです。(IE9以降対応)
相対指定の em や % 、絶対指定の px が一般的だと思いますが、
rem は親の影響を受けずにフォントサイズを指定することができます。
[参考]フォントサイズの指定はCSS3の「rem」が便利そう

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

テキストシャドウ

文字に1pxの黒いシャドウ

文字に簡単にシャドウをかけることができます。
シャドウの距離やぼかしはサイトのデザインに合わせて変更します。
色の指定を透過で調整することで濃度を簡単に調整できるので便利です。

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

文字に1pxの白いシャドウ

最近よく見る文字に立体感のでるズルいアレです。

@mixin text-shadow-white($opacity: 1){
  text-shadow: 0 1px 0 rgba(#FFF, $opacity);
}

ポジション

ポジションは結構多様するので下の4つをmixinにしました。
pxも一緒に書いてますが縦中央にする際パーセント指定(50%)をする場合もあるのでmixinに入れなくてもOKです。

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

グラデーション

上下に明→暗

lighten を使うことでメインのカラーを指定すれば簡単にグラデーションがつくれます。
$hogeにはデフォルトのカラーを指定することも可能です。変数でも16進数でも大丈夫です。
デフォルトのカラーを指定しない場合は「:$hoge」の部分を削除してください。

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

上下に暗→明

darken を使うことで上とは逆の暗→明のグラデーションがつくれます。

@mixin gradient-top-darken($color:$hoge, $darken:10){
  background-color: $color;
  @include background-image(linear-gradient(darken($color, $darken) 0%, $color 100%));
}

IE8~9に対応する

上記のmixinだとグラデーション非対応のIE8~9では適用されません。
受託の場合は対応ブラウザによって適用したいケースもあるかと思うので、下を上記mixinに追加すればIE8~9にもグラデーションが表示されます。
ただし、その分重くなるので個人的にはプログレッシブ・エンハンスメントを推奨します。
(古いブラウザでデザインが適用されなくてもコンテンツが問題なく見えていれば問題なしという考え)

@include filter-gradient(lighten($color, $lighten), $color, vertical);

IE9に対応する

IE9だけに対応すればOKという場合はmixinではなく、Compassにあるブラウザーサポートの変数で設定します。
どこでもいいですが、設定用のscssファイルがある場合はそこに下記の一行を追加すれば大丈夫です。
[参考]Compassでベンダープレフィックスなどのブラウザーサポートを制御する

$experimental-support-for-svg: true;

背景画像

CSS Spriteの設定

mixinの前にCSS Spriteを出力する設定をします。
私はSprite画像を主に以下の2つに分けて書き出しています。

  1. 文字を置換する画像文字の背景に入れる画像
  2. アイコン画像(文字の左側に配置)

マジックインポートというCSS Spriteのcssをすべて自動で書き出してくれるとても便利な機能もありますが、実際はbackground-position,width,heightなど変更したい場合が多いので今回は sprite-map で指定します。

1)文字の背景に入れる画像と文字を置換する画像

sprite-mapを指定します。
文字の背景に入れる画像と文字を置換する画像の場合は、スプライト画像のレイアウトを「$layout: smart」にして余白なく画像を配置するように指定します。
なぜなら画像サイズが大きくなりすぎるとiOSで表示の制限がかかるからです。

$replace: sprite-map("replace/*.png", $layout:smart);
$replace-img: sprite-url($replace);

※iOS(iPhone,iPad)での注意
Spriteなどの画像が大きくなりすぎるとiOSで表示の制限がかかるので気をつけましょう。
3メガピクセル以上の画像は縮小されて表示されるので、その場合は各画像を敷き詰めてレイアウトする($layout:smart)か、小分けにSprite画像を書き出すなどの対処が必要です。

2)アイコンなど文字の左側に配置する画像

アイコンのレイアウトは何も指定しなければ縦一列に並びます。
アイコンの場合は余白がほしいので「$spacing」に余白分のpxを指定します。

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

プレースホルダーセレクタの指定

さらにmixinで使うextend専用のプレースホルダーセレクタの記述(%セレクタの部分)をしておきます。
extendを使わないとmixinを使ったすべてのセレクタで同じbackground-imageの指定がされてしまうので、記述が同じ部分はextendを使って簡潔にします。

%sprite-background {
  background-image: $replace-img;
  background-repeat:no-repeat;
}
%sprite-replace {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

※extend多用の注意
extendを使うとどうしてもセレクタの数が増えてしまいます。
IE9以下では1つのCSSファイルにつき4,095個までしかセレクタを認識しないという制限がありますので気をつけましょう。

文字の背景に画像を入れる

文字の後ろに背景画像を表示するmixinです。
background-position,width,heightが自動で出力されるためこのmixinを使うと画像の位置やサイズが簡単に指定できます。

@mixin sprite-bg-dimensions($name) {
  @extend %sprite-background;
  @include sprite($replace, $name, true);
}

以下のようにセレクタ内でincludeしてください。

.selecter {
  @include sprite-bg-dimensions(filename);
}

CSSの出力結果です。

background-image: url('../img/replaces.png');
background-repeat: no-repeat;
background-position: -16px -42px;
height: 16px;
width: 60px;

画像位置を手動で指定したい場合

デザインによってはwidth,heightを指定せず、画像位置も手動で調整したい場合があります。
下のような柔軟なmixinも用意しておくと便利です。使用頻度は少ないかな。
background-position はデフォルトでSpriteのXとYが入るので、そこを基準に●px移動したいなど微調整をすることができます。

@mixin sprite-bg-position($name, $x: 0, $y: 0) {
  @extend %sprite-background;
  @include sprite-background-position($replace, $name, $x, $y);
  background-repeat: no-repeat;
}

文字を画像で置換する

ナビゲーションや見出しなど文字を画像で置換するためのmixinです。
上の「sprite-bg-dimensions」mixinをまるっとincludeして、文字を隠すプロパティだけ指定すればOKです。

@mixin sprite-replace($name) {
  @include sprite-bg-dimensions($name);
  @extend %sprite-replace;
}

以下のようにセレクタ内でincludeしてください。

.selecter {
  @include sprite-replace(filename);
}

CSSの出力結果です。

background-image: url('../img/replaces.png');
background-repeat: no-repeat;
background-position: -16px -42px;
height: 16px;
width: 60px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

上記のようなmixinをつくらずにCompassのmixinで画像置換を指定することも可能です。
個人的にはtext-indentをネガティブ(マイナス)で指定しなくないので自分でmixinをつくっています。
(SEO的にGoogleからスパムとされる可能性があるという噂もあったので一応。。経験上から言ってもマイナスでも問題ないとは思います!)

SCSS

@include sprite-replace-text($replace, name, true);

※true/falseは画像サイズの出力を指定できます。

CSS

text-indent: -119988px;
overflow: hidden;
text-align: left;
background-position: -60px 0;
height: 96px;
width: 96px;
background-image: url(/assets/sp/replace-sf0d9e3bfd2.png);
background-repeat: no-repeat;

アイコン画像(左側)

文字の左側にアイコン画像を表示するためのmixinです。
background-positionはアイコンのサイズによって変更したいので、上記と同じくデフォルトの位置を基準に微調整できるようにしてます。
また、私はpadding-leftも自動的に出力するようにしています。これでかなり楽できますよ。
デフォルトは「画像の横幅+4px」分が出力されるようにしていますが、デザインによっては調整したい場合もあるので手動でもpadding-leftを指定することが可能です。

@mixin sprite-icon($name, $x: 0, $y: 0, $pl: 4) {
  @include sprite-background-position($icons, $name, $x, $y);
  padding-left: image-width(sprite-file($icons, $name)) + $pl;
}

以下のように任意のセレクタでincludeして使ってください。
アイコンはclass名を「icon-xx」と先頭部分を共通化し、属性セレクタでスプライト画像のパスを指定すると便利です。
class名を共通化できない場合は、extend化してmixinにしてもOKです。

[class*="icon-"]{
  background-image: $icon-img;
  background-repeat: no-repeat;
}
.icon-home {
  @include sprite-icon(home);
}
.icon-li {
  @include sprite-icon(li, 0, 2, 12);
}

CSSの出力結果です。

[class*="icon-"]{
  background-image: $icon-img;
  background-repeat: no-repeat;
}
.icon-home {
  background-position: 0 0;
  padding-left: 21px;
}
.icon-li {
  background-position: 0 -66px;
  padding-left: 12px;
}

アイコン画像(右側)

まれにハテナマークなど文字の右側に画像を表示したいケースもあります。
下記のように画像の位置を右基準でCSS Spriteを指定してもいいのですが
IE9+なのとどっちにしてもSprite画像では位置調整に無理がでてきてしまいます。

background-position: bottom 10px right 10px;

なので、右側に表示したいアイコンに関してはSprite画像を使用せずに個別に指定するようにしています。
さらに inline-image にすることで dataURI で出力されるためこれならリクエスト数も減らせます。
(使いすぎると逆に表示が重くなる場合もあるので注意です)

@mixin icon-right($name, $pl: null) {
  background: inline-image("icons/#{$name}.png") no-repeat 100% 50%;
  @if $pl {
    padding-right: $pl + px;
  } @else {
    padding-right: image-width("icons/#{$name}.png") + 4;
  }
}

アニメーション

animationプロパティを使用する場合に便利なmixinです。
ペンダープレフィックスをmixinの方で指定するので、includeがとても簡潔になります。

$prefixes: ("-webkit-", "-moz-", null);
@mixin keyframes($name){
  @-webkit-keyframes $name {
    @content;
  }
  @-moz-keyframes $name {
    @content;
  }
  @keyframes $name {
    @content;
  }
}
@mixin animation($name, $duration, $timing, $delay, $count, $direction: null) {
  @each $prefix in $prefixes {
      #{$prefix}#{animation}: $name $duration $timing $delay $count $direction;
  }
}

以下のようにセレクタ内でincludeしてください。

.selecter {
  @include animation(opacity, 3s, ease, 0s, 1);
}
@include keyframes(opacity) {
  0% {
    @include opacity(0);
  }
  100% {
    @include opacity(1);
  }
}

CSSの出力結果です。

.selecter {
  -webkit-animation: opacity 3s ease 0s 1;
  animation: opacity 3s ease 0s 1;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity {
  0% {
    opacity: 0;
    }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
    }
  100% {
    opacity: 1;
  }
}

長々と見ていただいてありがとうございます!
使えそうなmixinはありましたか?

スマホサイト制作で使えるRetina対応のmixinはこちらをご覧ください!
[決定版]Retina対応したスプライト画像のmixin

サイト毎に調整してうまくmixinを活用してくださいね。
泣いちゃうくらいコーディングが倍速になります。

もっといいmixinがあるよ!って方はお気軽にコメントください!
まだまだ改良もできる気がするので都度更新していきたいと思いますー。

[14.01.09]「文字を画像で置換する」に追記しました。
[14.01.23]「グラデーション」に補足を追記しました。
[14.02.27]「アイコン画像」のpaddingもinclude時に調整できるように変更し、全体的にcssの出力結果などを追加しました。
[14.03.04]「アイコン画像」のpaddingの指定方法を変更しました。

Pocket
article clipper [Sass]泣くほど早い…今すぐ使える便利なmixin集

[Sass]親セレクタの参照ができる&(アンパサンド)の使い方

わんこそば、@cappeeです。ついにSassの本ができましたね。

Web制作者のためのSassの教科書」かなり参考になりました。

ちゃんと基本から勉強しないとダメですね(>_<)

今日は以外と使いこなせていなかった&(アンパサンド)についてです。

&(アンパサンド)とは

親セレクタの参照ができます。

擬似セレクタやセレクタの前に記述する

これは私もよく使っていてコードの階層がとてもわかりやすくなるので便利ですよね。

Sass(SCSS)

.link{
  text-decoration:none;
  &:hover{
    text-decoration:underline;
  }
  &.off{
    color:gray;
  }
}

コンパイル後のCSS

.link{text-decoration:none;}
.link:hover{text-decoration:underline;}
.link.off{color:gray;}

セレクタの後に記述する

セレクタの後に記述するとルールセット内の親要素をすべて参照するので、ページ単位でデザインやレイアウトを変えたい場合に便利です。
私はこれを使っていなくてもっと早く基本から勉強していればよかった。。

下記はお問い合わせなどのフォーム系ページだけサイドバーがなかった場合に、メインコンテンツ部分の横幅を広げたい時の例です。

Sass(SCSS)

#main{
  width:640px;
  #form-page &{
    width:100%;
  }
}

コンパイル後のCSS

#main{width:640px;}
#form-page #main{width:100%;}

ひとつ注意していただきたいのは、3階層以上になった場合、&を使うと上の階層で指定した親要素すべてを参照するということです。
下記のように3階層目で.section &と記述した場合「#main .section .box」とはならず、「.section #main .box」と出力されます。

Sass(SCSS)

#main{
  width:640px;
  .box{
    margin:10px;
    .section &{
    margin:0;
    }
  }
}

コンパイル後のCSS

#main{width:640px;}
.box{margin:10px;}
.section #main .box{margin:0;}

期待した通りの結果にするには、当たり前ではありますが下記のように普通に記述していれば特に問題ありませんね。

Sass(SCSS)

#main{
  width:640px;
  .section{
    margin:0;
    .box{
    margin:10px;
    }
  }
}

以上、&(アンパサンド)の基本の使い方でした!

私のように知らなかった方はSassの基礎をきっちり身につけてはいかがでしょう?

泣くほど早い…今すぐ使える便利なmixin集も公開していますのでぜひご覧ください!

Pocket
article clipper [Sass]親セレクタの参照ができる&(アンパサンド)の使い方

[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スプライトなど便利な記述を大公開!