Sassとは
目次
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; :
}
↓
$primary-black:#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
