Tech Labo F

SCSS（エスシーエスエス）は、Sass（サス）という言語の書き方（記法）の一つです。

今回は、Web制作の現場で標準的に使われている、その「SCSS」について解説します。

1. SCSSの特徴

SCSSは「CSSのスーパーセット（上位互換）」と呼ばれており、普通のCSSの書き方をそのまま使えるため、

初心者でも学習コストが低いのが特徴です。

ただし、そのままではブラウザが直接読めないので、「コンパイル（CSSへの変換）」という作業が必要だったりと、

扱いはちょっとした慣れが必要です。

2. SCSSを使うメリット

普通のCSSで書くよりも、圧倒的に記述量が減り・管理が楽になります。

具体的には以下の3つのメリットがあります。

①入れ子(ネスト)で書ける

親要素の中に子要素を記述できるため、HTMLの構造と似た形で直感的に書けます。

クラス名を何度も繰り返して書く必要がなくなります。

【SCSSの記述】

nav {
　background-color: #333;

　ul {
　　margin: 0;

　　li {
　　　display: inline-block;
　　}
　}
}

【CSSに変換（コンパイル）された後】

nav { background-color: #333; }
nav ul { margin: 0; }
nav ul li { display: inline-block; }

②変数が使える

再利用したい値（色、フォントサイズ、マージンなど）を変数として定義し、スタイルシート全体で使い回すことができます。

修正が入った時も、変数の値を一箇所変えるだけで済むので非常に楽です。

③パーツごとにファイルを分割できる

「ヘッダー用」「ボタン用」「リセット用」など、ファイルを細かく分けて管理し、最終的に一つのCSSファイルにまとめる事ができます。

これにより、大規模なサイトでもコードがごちゃごちゃにならず、スッキリ管理できます。

3. SASSとSCSSの違い

どちらもSassというCSSプリプロセッサですが、コードの記述法の違いになります。 違いは、以下のようになっています。

・SCSS記法：{ }や;を使う、CSSに近い書き方（現在の主流はコチラ）

・SASS記法：{ }や;を省略し、インデントだけで書く古い方法

上記の通り、今の制作現場で「Sass」といえば、一般的にSCSSが使われています。

今回のまとめ