Sassとは

Syntactically Awesome StyleSheetの略で、日本語で「文法的に素晴らしいスタイルシート」の事です。CSSをより効率的に書けるようにした言語(メタ言語)になります。SassはプログラムっぽくCSSを書くのでコーディング効率やソースコードの保守性が上がります。

Sassの特徴

• 入れ子にできる
  ボタンの中のテキストのサイズを書く場合、普通のCSSだと毎回.btn(親クラス)をつける必要があるが、Sassなら.btn(親クラス)の記述は1回で済みます。

.btn {
width: 200px;
}
.btn .text {
font-size: 12px;
}

↓

.btn {
width: 200px;
text {
font-size: 12px;
}

• 変数が使える
  テキストの色や背景色を後から一括で修正する事ができます。


.text {
color: #121212;
}

↓


.text {
color:$primary-black;
}

歴史

2006年:Sassが初公開。当時はHamlというHTMLをシンプルに書く事のできる仕様になっていてCSSとの互換性がなかったため導入のハードルが高かった。

2013年:CSSと似た記法で記述できる、SCSS記法。CSSと完全互換になり、一気に普及した。

豆知識

アンパサンド(&)を使用する事で擬似クラスや親要素を参照する事ができる。

.btn {
background-color: blue;
}
.btn:hover {
background-color: red;
}


↓

.btn {
background-color: blue;
}
&:hover {
background-color: red;
}


＜執筆・監修＞
アルサーガパートナーズ株式会社　DX技術用語集制作チーム　フロントdivision

（2021年4月時点）