ウィルスタイル株式会社 / Will Style Inc.

Sassとは？

Sass（サース）^※とはCSSを変数やmixinと呼ばれる関数を使って書くことができるRuby製のCSSメタ言語です。
複数のSassファイルをimportし、コンパイルすることで一つのCSSにまとめることもできます。
※日本では「サス」と呼ばれることが多いです。

Sass
Sass（サース、英: Syntactically Awesome Stylesheets）は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。 後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。
https://ja.wikipedia.org/wiki/Sass

インストール

Sassをインストールしてみましょう。
Windowsの人はRubyInstallerからRubyをダウンロードしてインストールします。
Macの人はすでにRubyが入っているのでインストールする必要はありません。
ターミナルまたはコマンドプロンプトから以下のコマンドでRubyのバージョン情報が出力されればRubyが入っているということです。

ruby -v
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]

あとは以下のコマンドでSassのインストールが完了します。

gem install sass

同じくバージョンを確認すればインストールできているのがわかると思います。

sass -v
Sass 3.4.23 (Selective Steve)

使い方

コンパイル

以下のコマンドで指定したscssファイルをコンパイルしcssファイルへ出力することができます。

sass input.scss:output.css

監視

Sassは変更を監視することができます。
フォルダー内のファイルやファイル自体に変更があった際にコンパイルします。

sass --watch input.scss:output.css

僕はこのコマンドで毎回記述するのは面倒なので「gulp」というタスクランナーを使っています。
この記事ではgulpの使い方は割愛します。

もっとフロントエンドの環境を極めたい方は以下の記事を参考にしてください。
いまどきのWebサイト制作におけるフロントエンド開発環境を構築してみた

SASS記法とSCSS記法

実際にどのように記述するのかを見ていきましょう。
CSSだと以下のように ul#hoge を複数書かなくてはならず、冗長になってしまいます。

CSS

ul#hoge {
	list-style:none;
	margin:0;
}
ul#hoge li{
　　margin-bottom: 10px;
}
ul#hoge li a{
　　color:#333;
}

Sassではセレクターをネストすることができるので、以下のようにして書くことができます。

SASS記法

ul#hoge 
	list-style:none;
	margin:0;
	li
		margin-bottom: 10px;
		a
			color:#333;

ただ、この書き方はCSS使いの方にはあまり書きやすいものではなく、後にSCSS記法というものが登場しました。

SCSS記法

ul#hoge {
	list-style:none;
	margin:0;
	li{
		margin-bottom: 10px;
		a{
			color:#333;
		}
	}
}

CSSに慣れている人でも見やすくわかりやすいですね。

Sassでできること

Sassでできることはネスト（入れ子）だけではありません。
よく使うものを抜粋してご紹介致します。

1. ネスト（入れ子）できる

先程の例のようにセレクターをネスト（入れ子）することができます。

2. 変数が使える

Sassでは変数が使えます。
例えばサイトのメインカラーやサブカラーを一気に変更する修正が入った際に値を書き換えてコンパイルすると一気に変更が可能になります。
「$」マークから始まる変数名を設定することで使いまわすことができます。

$main-color:#222;
$sub-color:#ccc;
#hoge{
	color:$main-color;
	a{
		color:$sub-color;
	}
}

コンパイル後

#hoge{
	color:#222;
}
#hoge a{
	color:#ccc;
}

3. mixin（関数）が使える

Sassではmixinと呼ばれる関数のようなものを使えます。
mixinとは似たような処理を、呼び出す際の引数で変更できるものです。
例えばベンダープレフィックスが必要なものをひとまとめにしておけば一回の記述ですべてを書くことができます。
@mixinで記述し定義しておき、 @include で使用することができます。

@mixin transform($transforms){
    -webkit-transform: $transforms;
       -moz-transform: $transforms;
        -ms-transform: $transforms;
            transform: $transforms;
}
#hoge{
	@include transform(scale(2));
}

コンパイル後

#hoge{
    -webkit-transform: scale(2);
       -moz-transform: scale(2);
        -ms-transform: scale(2);
            transform: scale(2);
}

4. importできる

変数やmixinなどのファイルを別ファイルにしインポートすることができます。
ページごとのファイルや、エレメントごとのファイルを作成し一箇所でインポートしてコンパイルすればひとまとめにすることができます。

@import "./settings.scss"
@import "./mixins.scss"

最後に

Sassの登場でコーディングが飛躍的に速くなりました。
プログラミングは少し苦手な印象をお持ちの方もCSSを少し楽に書けるという感覚ではじめられますので是非試してみてください。