【Sass】Sassとは？CSSをより美しく書く。(使い方編)

【導入】

Sassファイルとは、CSSの拡張ファイルです。
例えば、以下の様な記法をすることができます。

test.scss

.test {
  p {
    font-size:15px;
  }
}

これはCSSでいう、以下の記述と同じです。

.test p {
  font-size: 15px;
}

例えば、こんな書き方ができると
「class名とか被って、他のとこにも影響しちゃうんじゃないかな…」
なんて問題も、sass階層で書いていくことにより、回避しやすくことができますよね。
(より詳細に、意図した場所に書くことができるわけですから。)

もちろん、以下のような抽象的な記述は、階層で書かなければいいだけです。

li {
  font-family: "Source Code Pro","メイリオ","Meiryo","ヒラギノ明朝 Pro W6",Sans-Serif;
}

【使い方】

sassファイルは、あくまで記述用のファイルです。
sassプログラムを通してコンパイルし、cssファイルを作成する必要があります。

では先ほどのtest.scssをtest.cssにコンパイルします。
…といっても、sassファイルのあるディレクトリに移動し、ターミナルで以下のコマンドを打つだけで終わりです。

$ sass test.scss:test.css

これでtest.cssを生成できました。

【注意】

sassファイルには以下の2種類の拡張子が存在します。

• .sass
• .scss

しかしながら、.sassファイルはもはや化石になっていっている気がします…
初めて扱う方は、.scssファイルを使うことをおすすめします。