Sassについて #CSS

Sass(Syntactically Awesome StyleSheetの略)とはCSSの機能を拡張した言語。Sassを利用することで、CSSを効率的に書けるようになる。SassはCSSに非常に似ているが異なる言語。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができる。

SassはそのままではWebブラウザーに認識されない。Sassのファイルである.scssファイル（.sassファイルもある）をコンパイラーに通すことで.cssファイルを生成することになる。

Sass（SASS記法、SCSS記法）とCSSのコードの違いは以下の通り

body
  color: #000

body{
    color:#000;
}

SassとScssの違い

これをコンパイラーに通すと、下記変換となる。

body {
  color:#000;
}

SCSS記法とSASS記法の違いをまとめると、以下の表の通り

Sassのメリット

Sassには以下のようなメリットがある。

・記述の簡略化
・プログラムのような処理
・複数のCSSファイルを1つにまとめる
・同じ値を使い回す

Sassにおける変数

Sassでは、変数を使用することが可能。例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、変数名で何度も使用することができる。変数を定義するには、$変数名: 値;のように記述する。

$section-color: rgb(30,30,30);
section {
  background-color: $section-color;
}

パーシャル

パーシャルとは、分割したSassファイル。ファイルを分割することで、機能や内容ごとに管理ができるようになる。一つのファイルに全てのスタイルを書くと膨大な記述になり、可読性が悪くなる。一定のルールでファイルを分割して開発することで変更・修正がしやすくなる。

パーシャルファイルを作成するには、ファイル名を_（アンダースコア）から始める。パーシャルファイルを読み込むには、@import ファイル名と記述。
以下は、_reset.scssと_header.scssを読み込む例。
以下は例のため、sample.scssファイルを追加したり、実際に記述する必要はない。

sample.scss

@import "reset";  /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */

同じ値を使い回す

CSSでは、複数の要素に同じスタイルを適用させる場合、何度も同じスタイルを書かなければいけない。しかし、Sassでは変数を使うことによって、同じ値を使い回すことができる。
また、mixinという機能を使用することで、同じスタイルをまとめることも可能。

変数

Sassでは、変数が使用できる。
何度も使用する値を変数を定義することで、変数名で何度も使用することができる。
変数を定義するには、$変数名: 値;のように記述。
以下は変数を定義するファイル、_variable.scssを使用して変数を定義する例。

_variable.scss

$mainYellowColor: #FFEC00; 
 /* #FFEC00という色をmainYellowColorという変数名で定義する */

mixin

mixinとは、まとまったスタイルを定義することができる機能。
変数は値を定義するものだが、mixinはスタイルを定義するもの。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなる。
mixinを定義するには、@mixin mixin名() {}のように記述する。