始めに
Sassを使ったサイト構築、運用に関わるようになったものの、そもそもどういうものなのか自分自身ざっくりとしか把握していなかったので、整理する目的もあってまとめました。
これからSassを触る方向けの内容になっています。
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
あとは以下のコマンドでSassのインストールが完了します。
gem install sass
同じくバージョンを確認すればインストールできているのがわかると思います。
sass -v
使い方
コードを書いた後、コンパイルが必要です。
以下のコマンドで指定したscssファイルをコンパイルしcssファイルへ出力することができます。
sass input.scss:output.css
また、Sassは変更を監視することができます。
フォルダー内のファイルやファイル自体に変更があった際にコンパイルします。
sass --watch input.scss:output.css
「gulp」などのタスクランナーを用いる方法も一般的です。
興味のある方は検索してみてください。（丸投げ）
SASS記法とSCSS記法
実際にどのように記述するのかを見ていきましょう。
CSSだと以下のように ul#hoge を複数書かなくてはならず、冗長になってしまいます。
CSS
ul#hoge {
list-style:none;
margin:0;
}
ul#hoge li{
margin-bottom: 10px;
}
ul#hoge li a{
color:#777;
}]
Sassではセレクタをネスト(入れ子)することができるので、以下のようにして書くことができます。
SASS記法
ul#hoge
list-style:none;
margin:0;
li
margin-bottom: 10px;
a
color:#777;
ただ、この書き方はCSS使いの方にはあまり書きやすいものではなく、後にSCSS記法というものが登場したようです。
SCSS記法
ul#hoge {
list-style:none;
margin:0;
li{
margin-bottom: 10px;
a{
color:#777;
}
}
}
CSSに慣れている人でも見やすくわかりやすいですね。（…というか、CSS書くこと自体不慣れな自分はこれじゃないと違和感があります。）
Sassでできること
Sassでできることはネスト（入れ子）だけではありません。
よく使うものを抜粋してご紹介致します。
-
ネスト（入れ子）できる
先ほど紹介したの例のようにセレクターをネスト（入れ子）することができます。 -
変数が使える
Sassでは変数が使えます。
例えばサイトのメインカラーやサブカラーを一気に変更する修正が入った際に値を書き換えてコンパイルすると一気に変更が可能になります。
「$」マークから始まる変数名を設定することで使いまわすことができます。
$main-color:#222;
$sub-color:#ccc;
# hoge{
color:$main-color;
a{
color:$sub-color;
}
}
コンパイル後
# hoge{
color:#222;
}
# hoge a{
color:#ccc;
}
- 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);
}
- importできる
変数やmixinなどのファイルを別ファイルにしインポートすることができます。
ページごとのファイルや、エレメントごとのファイルを作成し一箇所でインポートしてコンパイルすればひとまとめにすることができます。
@import "./settings.scss"
@import "./mixins.scss"
最後に
Sassの登場はコーディングの速度やその後のメンテナンスにも大きく貢献しています。大規模なWebサイト開発におおて共通スタイルの修正漏れ対策にも有効です。
プログラミングは少し苦手な印象をお持ちの方もCSSを少し楽に書けるという感覚でスタートできるのでので是非試してみてください。
参考：
ウィキペディアSass
【初心者向け】ここから始める「Sass」の使い方まとめ
scss・sass徹底入門。使い方や導入方法を説明【CSS】