サンプルファイルの作成と実行
前述のとおりSassはCSSのメタ言語です。Sassという言語を使ってファイルを作成し、CSSファイルにコンパイル（変換）することで、効率的なCSSファイルの作成を実現できます。
最後に、Sassファイルの作成からCSSファイル生成までの一連の流れを説明します。
Sassという言語には書き方が2種類あります。それはSCSS記法とSass記法です。SCSS記法はCSSの構文を拡張した記法です。CSSと書き方が似ているため、CSSに慣れ親しんだ人にとっては分かりやすい記法となっています。次にSass記法ですが、SCSS記法より古い記法で、インデントを利用して記載していきます。SCSS記法と違ってシンプルに記載できるため、コード量を減らすことが可能です。
ちなみにSCSS記法で記載した場合、拡張子を「.scss」でファイルを作成し、Sass記法で記載した場合は、拡張子を「.sass」にしてファイルを作成します。
本稿は、現在の主流となっているSCSS記法で紹介していきます。
Windows環境でサンプルファイルの作成と実行
まずはSCSSファイルの作成です。今回は「sample.scss」というファイルを作成します。テキストエディタを利用して以下のようなファイルを作成しました。とりあえず任意の場所（今回はC:\sample_compass配下）に保存します。
ul{
margin:5px;
li{
float:left;
}
}
次に、作成した「sample.scss」をコンパイルしてCSSファイルを作成します。
先ほど起動したコマンドプロンプトからsassコマンドを入力して、CSSファイルにコンパイルします。
sass 作成したSassファイル名 出力するCSSファイル名
sample_compassフォルダを確認すると、sample.cssが作成されています。
| sample.scss | 最初に作成したSCSSファイル |
|---|---|
| .sass-cacheフォルダ |
キャッシュを保持しているフォルダ 次回コンパイル時に実行速度を上げるためのフォルダです |
| sample.css | Sassコマンドによって出力されたCSSファイル |
ul {
margin: 5px; }
ul li {
float: left; }
Mac環境でサンプルファイルの作成と実行
Mac環境でも同様の手順でCSSファイルを作成することができます。
まず、「sample.scss」ファイルを作成して任意の場所（今回は/Users/suzuki-kenji/sample_compas配下）に保存します。
ul{
margin:5px;
li{
float:left;
}
}
次に、作成した「sample.scss」をコンパイルしてCSSファイルを作成します。
先ほど起動したターミナルからWindowsでの手順と同様に、sassコマンドを入力して、CSSファイルにコンパイルします。
sample_compassフォルダを確認すると、sample.cssが作成されています。
ul {
margin: 5px; }
ul li {
float: left; }
まとめ
今回はSassの導入部分を紹介しました。次回はSassの多彩な機能を使って実践していきます。
