対象読者
- CSSの基礎知識がある方
- SassおよびCompassの導入を検討している方
Compassの主な機能
初めにCompassの機能を紹介します。CompassにはSassを効率よく記載するために、以下の機能が用意されています。
独自のmixin
CSSを部品のように扱えるのがmixin（ミックスイン）です。Compassには多彩なmixinが用意されています。使い方はSassと同様で「@include mixin名」と記載することで利用できます。後述する今回のサンプルでは、CSSのbackground-clipをmixinを使用して記載する方法を紹介します。
独自の関数
Compassには独自の関数が用意されています。「関数名(引数);」と記載して実行させます。後述するサンプルでは、splite-urlやsplite-positionといったCSSスプライトの作成で利用する関数を紹介します。
CSSスプライト
Compassを利用することでCSSスプライト画像とそのポジションが記載されたCSSが簡単に作成できます。
具体例として、pngファイル群からCSSスプライト画像を抽出する過程を紹介します。初めに、「Compassプロジェクト/config.rb」内に記載してある「images_dir」のフォルダ内にpng画像を配置します。
Compassプロジェクトを作成した際に作られる設定ファイル）
require 'compass/import-once/activate' # Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" ←ここの中にpngファイルを配置します javascripts_dir = "javascripts" # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: # relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: # line_comments = false # If you prefer the indented syntax, you might want to regenerate this # project again passing --syntax sass, or you can uncomment this: # preferred_syntax = :sass # and then run: # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
次にSassファイルの作成です。基本的な流れとして、sprite-map関数を利用してCSSスプライトにしたい画像を設定し、sprite-url関数やsprite-position関数を利用してCSSスプライト画像のパスや、表示したい画像の位置を表示します。今回はsprite-testという独自のmixinを作成して、CSSスプライト画像からmail-magazine.pngの位置を表示させます。
@charset "utf-8";
//background-clip（Compass独自のmixin）を利用するために記載します
@import "compass/css3.scss";
$device-pixel-ratio : 2; //スマートフォン用デバイスピクセル比 Retinaディスプレイは2を設定
//sprite-mapはCompass独自の関数です
//今回はsprite-map関数("画像の配置したパス", レイアウトパターン※)を利用してCSSスプライト画像を作成します
//※レイアウトパターンについてはhttp://compass-style.org/help/tutorials/spriting/sprite-layouts/を参照
$spritemap: sprite-map("smart/base/images/sprite/*.png",$layout: smart);
@mixin sprite-test($image){
//sprite-url関数はCSSスプライト画像のURLを返します
background-image : sprite-url($spritemap);
//sprite-file関数で元ファイル画像のパスを返します
$image-path : sprite-file($spritemap, $image);
//sprite-position関数で元画像の位置を取得します x値、y値が取得できます
$image-position : sprite-position($spritemap, $image);
//image-height関数で元画像の縦幅を取得します
height : image-height($image-path) / $device-pixel-ratio;
//image-width関数で元画像の横幅を取得します
width : image-width($image-path) / $device-pixel-ratio;
//sprite-position取得した画像位置のx値を取得します
$pos_x : round(nth($image-position, 1) / $device-pixel-ratio);
//sprite-position取得した画像位置のy値を取得します
$pos_y : round(nth($image-position, 2) / $device-pixel-ratio);
background-position : $pos_x $pos_y;
//background-clipはCompass独自のmixinです
//ベンダープレフィックスを付与して引数にしていされたbackgrund-clipを記載します
@include background-clip(padding-box);
}
.nav{
.mail-icon{
//mail-magazine.pngを表示する
@include sprite-test("mail-magazine");
}
}
Sassファイルの用意ができたら、Compassプロジェクト上で「compass watch」とコマンドを入力して監視を開始します。その後、作成したSassファイルをconfig.rbに記載したsass_dir下に配置すればCSSファイルが出力されるはずです。
.nav .mail-icon {
background-image: url('../../../smart/base/images/sprite-s570f9b11e3.png');
height: 11px;
width: 11px;
background-position: -11px -11px;
-webkit-background-clip: padding;
background-clip: padding-box;
}
