何度も言うけど、scss + compassはとてもステキ。1年ぐらい前に書いたリティーナディスプレイに対応した画像置換をするscssのmixinの使用頻度が高いので、皆さんに共有したいと思います。


事前準備

普通の画像例:head-logo.pngと、名称の最後に「@2x」をつけたリティーナディスプレイ用の画像例:head-logo@2x.pngを準備し、同じフォルダーに格納。


Mixinの記述

[sass]
//リティーナディスプレイ対応用の@media-Mixin
@mixin retina {
@media (min–moz-device-pixel-ratio: 1.3),(-o-min-device-pixel-ratio: 2.6/2),(-webkit-min-device-pixel-ratio: 1.3),(min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx) {
@content;
}
}

//リティーナディスプレイ対応の画像置換mixin
@mixin bg-img($imgURL,$extension:png){
@include hide-text(); //Compass Text Replacement mixin
$width: image-width($imgURL + ‘.’ + $extension);
$height: image-height($imgURL + ‘.’ + $extension);
display: block;
background-image: image-url($imgURL + ‘.’ + $extension);
width: $width;
height: $height;
background-repeat: no-repeat;
@include retina{
background-image: image-url($imgURL + ‘@2x.’ + $extension) ;
background-size: $width $height;
}
}

[/sass]


scssの記述

[sass]
//出力用記述 ※拡張子の「.」を「,」に変更すること!
.text{
@include bg-img(common/head-logo,png);
}
[/sass]


コンパイル後のcss

[css]
.text {
text-indent: -119988px;
overflow: hidden;
text-align: left;
display: block;
background-image: url(‘../img/common/head-logo.png?1420813517’);
width: 81px;
height: 15px;
background-repeat: no-repeat;
}
@media (min–moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.text {
background-image: url(‘../img/common/head-logo@2x.png?1420813517’);
background-size: 81px 15px;
}
}
[/css]

Compassにはimage-width,image-heightを利用することで、画像のサイズを自動で読み取ることができるので、その機能を利用。とっても便利ですね。また、リティーナディスプレイに対応するための@mediaの記述を外出しにしているのは、対応しないといけないデバイスサイズが、あれよあれよと増えてくるため、他のリティーナディスプレイ用に書いたscssも一括で修正できるようにしてます。

まだまだ、便利なscssMixinはあるので、少しづつ更新していこうかな。

  • 2015/01/16
  • 184
  • 0

関連記事

コメントを残す