Sass/Compass のインストールと基本的な環境設定

2014年3月4日

Windows 環境での Sass と Compass のインストールと基本的な環境設定に関するメモ。

Ruby のインストール

Sass には Ruby が必要なので Ruby がインストールされているかどうかをコマンドプロンプトで確認する。

ruby -v

上記コマンドで Ruby のバージョンが表示されれば、Ruby はインストール済み。

インストールされていない場合は、Ruby の公式サイトのダウンロードページ（https://www.ruby-lang.org/ja/downloads/）の下のほうにある「Windows版Rubyバイナリ」からリンクを選択してそのページへ。

例：RubyInstaller (英語) 安定版に多数の便利なライブラリを加えたもの。

RubyInstaller のページに行くと「Download」ボタンがあるのでクリック
「Downloads」ページでダウンロードするバージョンを選択（64bit の場合は x64 と書かれているものを選択）してダウンロード
ダウンロードしたら、実行ファイル（.exe）をダブルクリックしてインストール
「インストール先とオプションの指定」の画面では「Ruby の実行ファイルへの環境変数 PATH を設定する」にチェックを入れる。

インストールが完了したら、以下のコマンドでバージョンを確認。

ruby -v

Sass のインストール

Sass をインストールするには gem コマンドを使用。

コマンドプロンプトで以下を実行すると Sass がインストールされる。

gem install sass

Sass のバージョンの確認

sass -v

Sass をアップデート

まずは gem を最新のものにアップデート

gem update --system

以下のように表示されれば、最新の gem がインストールされている。

Latest version currently installed. Aborting.

Sass をアップデートするにはコマンドプロンプトで以下を実行

gem update sass

以下のように表示されれば、最新版がインストールされている。

Updating installed gems
Nothing to update

Sass のアンインストール

以下のコマンドを実行すると、インストールされている Sass のバージョンや依存性の警告が表示されるので、削除したいバージョンを選択する。

gem uninstall sass

Sass コマンド

基本的な Sass コマンドについて。

この例では以下のような Sass ファイル（test.scss）を作成

test.scss

#main {
  width: 600px;
  p {
    margin: 0 0 1em;
    color:  #666;
    }
}

カレントディレクトリへの移動

コマンドプロンプトを開くと、カレントディレクトリはホームフォルダになっているので、作業するファイルのフォルダへ「cd」コマンドで移動する必要があるが、以下は少し簡単な方法。

１．「cd」コマンド入力後、フォルダをコマンドプロンプトへドラッグ＆ドロップする

２．Vista 以降の場合は、フォルダを選択後「Shift キー」を押しながら右クリックすると「コマンドウィンドウをここで開く」というメニューが表示されるので、これを選択するとそのフォルダをカレントディレクトリとしてコマンドプロンプトを開くことができる。

コンパイル

書式: sass [options] [INPUT]:[OUTPUT]

options：オプション
INPUT：SCSS ファイルを指定
OUTPUT：コンパイル結果の CSS ファイル名を指定

「test.scss」を「test.css」にコンパイルする例

sass test.scss:test.css

「sass/test.scss」を「css/test.css」にコンパイルする例（カレントディレクトリ：sass）

sass test.scss:../csstest.css

アウトプットスタイルの指定

アウトプットスタイル（コンパイルされたファイルの見栄え）のオプションは「–style または -t」と記述し、半角スペースを空けてスタイルを指定。

スタイルの種類

nested（デフォルト）
expanded
compact
compressed

スタイルに「expanded」を指定する例

sass test.scss:test.css --style expanded

nested（デフォルト）を指定した場合のアウトプット（CSS）

#main {
  width: 600px; }
  #main p {
    margin: 0 0 1em;
    color: #666; }

expanded を指定した場合のアウトプット（CSS）

#main {
  width: 600px;
}
#main p {
  margin: 0 0 1em;
  color: #666;
}

compact を指定した場合のアウトプット（CSS）

#main { width: 600px; }
#main p { margin: 0 0 1em; color: #666; }

compressed を指定した場合のアウトプット（CSS）

#main{width:600px}#main p{margin:0 0 1em;color:#666}

ファイルの更新の監視（Watch オプション）

Watch オプションを付けると、Sass ファイル（またはフォルダ）を監視し、更新（保存）される度に自動的にコンパイルされる（Sass ファイルを書き換えて保存すると、CSS ファイルも更新される）。

Watch オプションを利用するには「–watch」を付ける。

ファイル単位で更新を監視する例
「test.scss」を監視して、更新されると自動的に「test.css」としてコンパイルする

sass --watch test.scss:test.css

以下のように表示される

C:\xampp\htdocs\sublime\sass>sass –watch test.scss:test.css
>>> Sass is watching for changes. Press Ctrl-C to stop.

フォルダ単位で更新を監視

拡張子を付けずに指定すると、それをフォルダ名として認識し、そのフォルダ内の全てのファイルを監視する。

「input」フォルダ内の Sass ファイルを監視して更新があれば、同じ「input」フォルダに CSS ファイルを書き出す場合

sass --watch input

カレントディレクトリを監視して、カレントディレクトリ内に CSS ファイルを書き出す場合

sass --watch .

書き出し先を指定する場合は、コンパイルと同様に CSS を書き出すフォルダをコロン（：）で区切って指定。

「input」フォルダ内の Sass ファイルを監視して更新があれば、CSS フォルダ内の「output」フォルダに CSS ファイルを書き出す場合

sass --watch input:css/output

コンパイル結果のファイル名を指定することも可能

sass --watch input:css/test.css

他のオプションと組み合わせて指定することも可能。

sass --watch --style expanded input:css/output

エラーが起きた場合は停止するオプション

Watch オプションは記述ミスなどでエラーが出ても監視を続けるが「–stop-on-error」オプションを付けるとエラーが起こった場合に監視を中止する。

sass --stop-on-error --watch input

「.sass-cache」フォルダ

Sass ファイルをコンパイルすると、カレントディレクトリに「.sass-cache」というフォルダが作成される。

.sass-cache フォルダ: コンパイル処理を高速化するために必要なファイル（キャッシュ）を格納するフォルダ。; オプションを指定して異なるフォルダ名にしたり、キャッシュフォルダを作らないようにすることなどが可能。

キャッシュフォルダを異なるフォルダにする場合

sass --watch input --cache-location フォルダ名

キャッシュフォルダを作らない場合

sass --watch input --no-cache

Sass コマンドのその他のオプション

ヘルプを表示（以下の３つはいずれも同じ）

sass --help
sass -h
sass -?

SCSS ファイルの位置のコメント（ファイルのパスと記述されている設定の行番号）を出力する
「–line-comments」オプション

sass --watch --line-comments --style expanded sass:css

コンパイルされた CSS

/* line 1, ../sass/test.scss */
#main {
  width: 600px;
}
/* line 3, ../sass/test.scss */
#main p {
  margin: 0 0 1em;
  color: #666;
  padding: 5px;
}

バッチファイルの作成

フォルダの監視やコンパイルを毎回行うのは面倒なので、バッチファイルを作成して簡単に作業できるようにする。

テキストエディタで拡張子が「bat」のファイルを作成して、以下のように記述する（例）。

バッチファイルの例（sass_batch.bat）

cd /d %~dp0

sass --watch -t expanded sass:css
::sass --watch -t nested sass:css
::sass --watch -t compact sass:css
::sass --watch -t compressed sass:css

cd /d %~dp0: 「実行されているファイルが置かれているカレントディレクトリ」を表す（このバッチファイルがある場所に移動する）。

sass –watch -t expanded input:css: アウトプットスタイルを「expanded」に指定して、「sass」フォルダ内の Sass ファイルを監視して更新があれば、CSS フォルダ内に CSS ファイルを書き出す場合（-t は –style と同じこと）

::（コメントアウト）: バッチファイルでは先頭にコロン２つ（::）を付けると１行コメントになる。
使用するスタイルのコマンド以外をコメントアウトすれば、スタイルを変更できる

このファイルを作業するフォルダに置いて、ダブルクリックすると「sass」フォルダ内の Sass ファイルを監視して更新があれば、CSS フォルダ内に CSS ファイルを書き出す。

バッチファイルの編集

バッチファイルはダブルクリックしたり「開く」を選択すると実行されてしまうので、編集する場合は右クリックして「編集」を選択。

バッチファイルを実行するとループになってしまう場合

バッチファイルを実行するとコマンドラインがループして表示され続ける場合は、Ctrl + C で中断して以下を試して見る。

バッチファイルと監視フォルダを同名で同階層に置かないようにする
バッチファイルのファイル名か、監視するフォルダ名を同じ名前にならないように変更する

バッチファイルを「sass.bat」として以下の内容を記述して実行するとループになってしまう。

cd /d %~dp0
sass --watch -t expanded sass:css

フォルダ構成

以下のようにコマンドがループする。

バッチファイルを「sass.bat」以外の名前に変更すると、正常に実行される。

–load-path オプション

Sass はパーシャルを読み込むときは、プロジェクトフォルダ内に含まれている必要がある。
–load-path オプションを指定することで、読み込むパスを追加することが可能。
インポートできるのは指定した階層のみで下層のフォルダは読み込まれない。
パスは現在地からの相対パスでも指定できるが、バッチファイルの場合など常に同じ場所からインポートする場合はフルパスで指定したほうが便利。
また、パスに日本語などの全角文字が含まれると読み込めない。

書式: sass -watch sass:css –load-path パス

例

cd /d %~dp0
sass -watch sass:css --load-path C:\sass\myLibrary

Compass のインストール

以下は Sass がインストールされていることを前提としている。

Compass がすでにインストールされているかどうかをコマンドプロンプトで確認する。

compass -v

上記コマンドで Compass のバージョンが表示されれば、Compass はインストール済み。

インストールされていない場合は、以下のコマンドを実行。

gem install compass

インストールが完了したら、前述のコマンド（compass -v）でバージョンを確認。

アップデートする場合は以下のコマンドで。

gem update compass

Compass プロジェクトの作成

プロジェクトを作成したいフォルダに移動して、以下のコマンドを実行。

この場合 Sass ファイルは「sass」フォルダに、CSS ファイルは「css」フォルダにプロジェクトが作成される。

compass create --sass-dir "sass" --css-dir "css"

上記コマンドを実行すると、以下のようなフォルダとファイルが作成される。

.sass-cache フォルダ
css フォルダ
sass フォルダ
config.rb

sass フォルダの中には「ie.scss」「print.scss」「screen.scss」というファイルが作成される

css フォルダの中には「ie.css」「print.css」「screen.css」というファイルが作成される

これらはそのまま使用しても良いし、独自のファイルを作成して使用することもできる。

何もオプションを付けずに以下のように実行すると、デフォルトのフォルダが作成される。

compass create

デフォルトで作成されるフォルダ
Sass フォルダ名：sass
CSS フォルダ名：stylesheets

初期で作られる Sass ファイルや CSS ファイルが必要ない場合は以下のようにすれば config.rb と sass フォルダだけが作られる。

compass create --bare

config.rb の設定

自動的に作成された「config.rb」はこのプロジェクトの設定ファイルとなっている。必要に応じてオプションを指定する。

以下は参考になるサイト
[Compass] 超訳 Configuration Reference /WebTecNote
CSSの常識が変わる！「Compass」、基礎から応用まで！
設定ファイルを知っておこう – 番外編
 SassとCompassを使って楽しくCSSコーディング！

プロジェクトディレクトリの指定

環境（フォルダの構成）に合わせて以下のプロジェクトディレクトリの指定をしておく（プロジェクトからの相対パスで指定）。

以下は「compass create」コマンドでオプションを指定せずにプロジェクトを作成した場合（デフォルト）のプロジェクトディレクトリの例

http_path = “/”
css_dir = “stylesheets”
sass_dir = “sass”
images_dir = “images”
javascripts_dir = “javascripts”

「compass create」コマンドで全てのディレクトリ（フォルダ）を指定して作成することも可能。

compass create --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"

上記コマンドでプロジェクトを作成した場合

http_path = “/”
css_dir = “css”
sass_dir = “sass”
images_dir = “img”
javascripts_dir = “js”

アウトプットスタイル

デフォルトは「expanded」。例えば「compact」にする場合は以下のように指定する。（コメントアウトを外して編集）

output_style = :compact

パスの指定

画像の URL を取得する際に、生成する URL を相対パスか絶対パスかを指定する。
「# relative_assets = true」のコメントアウトを外して相対パスにしておくと良い。

relative_assets = true

ラインコメントの設定

Sass ファイルの行数などのコメントを書き出したくない場合は、コメントアウトを外して以下のようにする。

line_comments = false

画像のクエリ情報の削除

キャッシュ削除のためのパラメータ（ランダムな数字）が画像パスの末尾追加さるが、つけたくない場合は以下のように指定。

asset_cache_buster :none

Sassのコンパイル時に Source Map の生成

Source Map（ソースマップ）とはコンパイルされたり圧縮された元の位置を教えてくれるファイルです。スタイルシートのデバッグをするときに、コンパイル後の CSS ファイルでなく Sass ファイルの場所を表示するようにすることができます。
Compass のバージョン：Compass 1.0.3 (Polaris)　（2016年5月21日追記）

sourcemap = true

config.rb の例

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

# 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

asset_cache_buster :none
sourcemap = true

バッチファイルの作成

フォルダの監視やコンパイルを毎回行うのは面倒なので、Sass 同様バッチファイルを作成して簡単に作業できるようにする。

テキストエディタで拡張子が「bat」のファイルを作成して、以下のように記述してプロジェクトフォルダに配置しておく。

バッチファイルの例（compass_start.bat）

cd /d %~dp0
compass w

WordPress のテーマで使用する場合

作業中の WordPress のテーマで Sass/Compass を使用する場合の例。

テーマのフォルダ内に「sass フォルダ」「css フォルダ」「config.rb」「compass_start.bat」を配置

config.rb のパス

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

compass_start.bat

cd /d %~dp0
compass w

sass フォルダの中に「style.scss」を配置。（コンパイルされると css フォルダの中に「style.css」が生成される）

functions.php で CSS フォルダ内の「style.css」を読み込むように設定して、header.php では読み込まない。

functions.php

function register_style() {
  wp_register_style('style', get_template_directory_uri().'/css/style.css');
}

function add_stylesheet() {
  register_style();
  wp_enqueue_style('style');
}
add_action('wp_print_styles', 'add_stylesheet');

通常の style.css には WordPress にテーマを認識させるために以下のみを記述

/*
Theme Name: テーマ名
Description: テーマ概要
Author: 著者
*/

参考にしたサイト：Compass Compiling and WordPress Themes / css-tricks.com

Compass のインポート

Compass をインポートするには、以下のように指定して Sass に Compass をインポート。

Sass

@import "compass";

上記のように指定すると、以下の Compass のコアモジュールのミックスインなどの機能が使えるようになる。

Compass のコアモジュール

CSS3 : ベンダープレフィックスやレガシーブラウザ対応のミックスインなど
Typography : テキストカラー、行間などのテキスト系ミックスイン
Utilities : 色や Clearfix などのミックスイン

モジュールを個別にインポートすることも可能。

@import "compass/css3";
@import "compass/typography";
@import "compass/utilities";

以下の２つのモジュールはコアモジュールでインポートされないので、個別にインポート指定する必要がある。

Layout : レイアウト用のモジュール。グリッド背景、ストレッチ・レイアウトなど
Reset : リセット CSS のモジュール

@import "compass/layout";
@import "compass/reset";

フォルダ構成

Sass と Compass を使用できる環境ができたので、以下のようなフォルダ構成を作成してみた。

自動的に作成された ie.scss, print.scss, screen.scss, ie.css, print.css, screen.css は全て削除。

sass フォルダに以下の Sass ファイルを作成（Compass にはリセットや豊富なミックスインがあるが独自に作る場合も考えて）

_extend.scss (独自の @extend 用ファイル)
_mixin.scss (独自のミックスイン用ファイル)
_reset.scss (独自のリセット CSS)
_setting.scss (プロジェクト全体の設定用ファイル：変数などの定義)
style.scss (メインのスタイルと各 Sass ファイルのインポート用：このファイルのみ CSS として生成される)

compass_cmp_03

style.scss の記述例（内容はない）

@import "setting";   //変数等の定義の読み込み（最初に記述）
@import "compass/reset";   //Compass のリセットの読み込み
@import "compass";   //Compass のコアモジュールの読み込み
@import "extend";
@import "mixin";

.box {
  @include border-radius(10px 5px);
}

出力される CSS

/* line 17, ../../../../Ruby/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
・・・省略・・・
/* line 7, ../sass/style.scss */
.box {
  -webkit-border-radius: 10px 5px;
  -moz-border-radius: 10px 5px;
  -ms-border-radius: 10px 5px;
  -o-border-radius: 10px 5px;
  border-radius: 10px 5px;
}

コメントが表示されているが、非表示にするには「config.rb」に以下を記述するか、その行のコメントアウトを外す

line_comments = false

Compass の設定変数

Compass の設定変数を変更することで、ベンダープレフィックスやレガシーブラウザ対応の設定を変更することができる。

Removing Vendor Prefixes from Compass Stylesheets
Compass Variables（Compass の変数）
Compass Cross-Browser Support Configuration

ベンダープレフィックスのオン・オフ

追記：Compass の新しいバージョン：1.0.3 (Polaris) では以下の設定変数はサポートされていません。（2016年5月22日）
関連記事：「Compass のベンダープレフィックス」

初期値は以下のようになっているので、不要なベンダープレフィックスの値を「false」にすれば、そのベンダープレフィックスは出力されなくなる。

$experimental-support-for-mozilla : true !default;
$experimental-support-for-webkit : true !default;
$experimental-support-for-opera : true !default;
$experimental-support-for-microsoft : true !default;
$experimental-support-for-khtml : true !default;

Opera と Konquerer のベンダープレフィックスが不要な場合の例

$experimental-support-for-opera:false;
$experimental-support-for-khtml:false;
@import "compass/css3";

個々の設定に対して指定することもできるみたい。

.kadomaru {
  @include border-radius(4px);
}

$experimental-support-for-opera : false;
.kadomaru2 {
  @include border-radius(4px);
}

$experimental-support-for-opera : true;
.kadomaru3 {
  @include border-radius(5px);
}

コンパイルされた CSS

.kadomaru {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.kadomaru2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.kadomaru3 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

レガシーブラウザの対応のオン・オフ

以下は IE6/7 に対応するかどうかの設定変数（初期値は true：オン）

$legacy-support-for-ie: true;

IE のバージョンごとに指定することも可能。初期値は「$legacy-support-for-ie」の値が設定されている。

$legacy-support-for-ie6: $legacy-support-for-ie;
$legacy-support-for-ie7: $legacy-support-for-ie;
$legacy-support-for-ie8: $legacy-support-for-ie;

IE6/7 の対応をオフにする例

.foo {
  @include inline-block;
}

$legacy-support-for-ie: false;
.bar {
  @include inline-block;
}

コンパイルされた CSS

.foo {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}

.bar {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
}

その他の設定変数

以下はその他の設定変数とその初期値

//Firefox 3.6 以下の対応をどうするか
$legacy-support-for-mozilla: true;
//Webkit の初期のグラデーションの記法をサポートするかどうか
$support-for-original-webkit-gradients: true;
//SVG を書き出すかどうか
$experimental-support-for-svg: false;
//CSS3PIE をサポートするかどうか
$experimental-support-for-pie: false;

Compass で CSS スプライト

Compass の Sprites モジュールを使うと簡単に CSS スプライトが作成できる。

以下のようなリストを作成する例。

「images_dir」で指定した画像フォルダ（この例では images）の中に「icon」というフォルダを作成し、以下のようなアイコン画像（32×32）を用意。（この例では「icon」としているが、名前は何でもかまわない）

contact.png
download.png
home.png
profile.png

images/icon

HTML

<ul>
  <li><a href="#" class="icon-home">home</a></li>
  <li><a href="#" class="icon-profile">profile</a></li>
  <li><a href="#" class="icon-download">download</a></li>
  <li><a href="#" class="icon-contact">contact</a></li>
</ul>

CSS

li a {
  display: block;
  padding: 10px 0 0 40px;
  height: 32px;
  font-size: 14px;
}

スプライト画像の作成

マジックインポートという機能で簡単に個々の画像を1枚の画像に結合して、background プロパティを書き出すことができる。

以下のように記述すると、画像フォルダ（images）に結合した画像が作成され、background プロパティも書き出される。結合した画像名は「フォルダ名-文字列.png」となる。

@import "icon/*.png";

コンパイルされた CSS

.icon-sprite {
  background: url('../images/icon-sf47ed3d192.png') no-repeat;
}

注意点

スプライト画像は PNG フォーマットのみが対応している
フォルダ名、ファイル名は先頭が数字や日本語などは使用できない
config.rb の設定でパスの指定を「relative_assets = true」としていないと background: url(‘/images/icon-sf47ed3d192.png’) となってしまった

背景の位置の書き出し

画像の位置を書き出すには「all-フォルダ名-sprites」ミックスインを使用する。

@import "icon/*.png";
@include all-icon-sprites;

コンパイルされた CSS

.icon-sprite, .icon-contact, .icon-download, .icon-home, .icon-profile {
  background: url('../images/icon-sf47ed3d192.png') no-repeat;
}

.icon-contact {
  background-position: 0 -127px;
}

.icon-download {
  background-position: 0 -85px;
}

.icon-home {
  background-position: 0 0;
}

.icon-profile {
  background-position: 0 -42px;
}

それぞれのクラスセレクタは「.フォルダ名-ファイル名」になっている。

リストの数が増えた場合でも、「icon」フォルダに画像を追加するだけでスプライト画像の再作成及び位置の再計算をしてくれる。画像が減る場合も同様。

Sprites の設定変数

スプライト画像の間隔

間隔を空けないと隣接したスプライト画像が見えてしまうような場合はスプライト画像の間隔を指定する。

設定変数「$フォルダ名-spacing」を定義することにより画像の間隔を設定できる。「@import」の前に記述する必要がある。

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

この他にも以下のような設定変数がある。

スプライト画像の書き出しパターン：$フォルダ名-layout (vertical, horizontal, diagonal, smart)
スプライト画像の位置：$フォルダ名-position (px)
スプライト画像の繰り返し：$フォルダ名-repeat (no-repeat, repeat-x)
スプライト画像の上書き：$フォルダ名-clean-up (true, false)
サイズの取得：$フォルダ名-sprite-dimensions (true, false)

疑似クラスの作成

:hover などの疑似クラスも簡単に作成できる。

ホバー時用の画像を用意し、画像名の後に「_hover」を付ける（home_hover.png など）
画像を「icon」フォルダに配置
コンパイルする

これだけで、以下のような CSS が追加され、マウスオーバーで画像が切り替わる。

.icon-home:hover, .icon-home.home_hover, .icon-home.home-hover {
  background-position: 0 -126px;
}

クリック時の :active 疑似クラスやリンクターゲット時の :target 疑似クラスも同様に、画像を用意して、画像名に「_active」「_target」を付けてコンパイルするだけで作成できる。

Web Design Leaves