sass編ではcssのコンパイラーsassを使ってgulpの中でコンパイルを自動化する環境を作ってみましょう。
gulpの開発環境にsass導入する前に今回はsassとは何かという話をしたいと思います。
cssプリプロフェッサー
皆さんはsassという物をお使いになった事はありますか？
開発当時はlessでコンパイルされていたbootstrapもsassでコンパイルされるようになりました。
sassやlessはcssプリプロフェッサーと呼ばれています。
Sassは、Syntactically Awesome Stylesheetsの略です。直訳すれば「とっても素晴らしいスタイルシート」になってしまい身も蓋もありませんがSassはhtmlの入れ子の構造をそのまま表現して書きます。cssは入れ子構造を意識していないプログラムです。
cssをコンパイルするメタ言語
saccはcssのメタ言語と呼ばれています。つまり、cssの定義を行うための言語の事です。
多くのプログラマは入れ子構造で書かれていないcssをとても不合理に思うそうです。そこでhtmlの構造をそのまま記述し、後で本来のcssの形に書き出す（コンパイル）するsassが生まれました。
sassはよりプログラマフレンドリーなスタイルシートと言えます。
sassの記述例
cssの書き方は以下の様に階層構造を子孫セレクタによって住所のように表しています。
[css] width:400px;}
nav ul {
margin: 0 auto;
}
nav ul li{
width: 100px;
}
nav ul li a{
display: black;
}
[/css]
cssでは上記の様に書いた子孫セレクタのを代わりに階層を書けばいいのです。
[css] navwidth:400px;
ul
margin: 0 auto;
li
width: 100px;
a
display: black;
[/css]
しかしこの方法はあまりにもcssとかけ離れているためコーダーに人気がありませんでしてた。
そこで開発されたのがJavaScriptやphpなどのスクリプト言語に近い書き方であるscss記法が登場しました。
上記のsassをscssで記述すると以下の様な書き方になります。
[css] width: 400px;ul {
margin: 0 auto;
li {
width: 100px;
a {
display: block;
}
}
}
}
[/css]
htmlと同じ入れ子構造になっており、cssより解りやすくなりました。
次回は、gulpのプロジェクト内で自動で、scssからcssへのコンパイルを行う方法をお伝えいたします。
また、高機能エディタSublimeText3を使ったGulp開発環境構築法を、スクーにて全6回でお届けします。
合わせてご覧ください。
【2017-2018年版】Sublime Text入門
