Sassとは
Sass は Less, Stylus, Tass, PCSS などと同様の CSS を拡張したメタ言語のひとつです。
- Sass は Syntactically Awesome Stylesheets (構文的にイケてるスタイルシート) の略です。「サス」と読みます。
- CSS に対して変数、ネスティング、Mixins、インラインインポートなどの機能を強化します。
- 色や値を操作するための多くの関数が用意されています。
- if文や for文などの制御構文をサポートします。
- Sass構文や SCSS構文で記述したファイルをコンパイラで CSS構文に変換して使用します。
- ファイルサイズ圧縮のため、minify(compress)されたファイルを出力することが可能です。
はじめに
冒頭にも記載しましたが、CSSメタ言語の中では比較的に構文がCSSに近く、とっつきやすい印象があります。
その中でも私が使ってききて、これは使えるな！っと思った機能をピックアップしてご紹介いたします。
インターポレーション(#{...})
これインターポートレーションていうんだ。。。
って調べて思いました笑
俗にいう「変数埋め込み」です。
Sassは$・・・の形式で変数を作ることが可能です。
そして定義した変数を埋め込むことで無駄な繰り返しを省くという特性があります。
ネスティング
これは基本中の基本ですね。
ノードの構成の合わせてスコープを小さくできるし、影響範囲の調査も不要になります。
開発効率も上がるし、保守性も高く、可読性も高い！
やらないてはないかと思います！
親セレクタ(&)
&で親のセレクタが取得できる。
擬似クラスなどを書く際に用いるととても可読性が上がるし、
スコープの限定もできるのででグレードが発生しにくい。
ここまでのコード
See the Pen sass convey by Katsunari Yamazaki (@trust-k-yamazaki) on CodePen.
ミックスイン(Mixin, @include)
基本スタイルを決めて何度も再利用できるものにするMixin
拡張(@extend)
既に定義済みのスタイルを拡張するExtend
ここまでのコード
See the Pen Sass extend mixins by Katsunari Yamazaki (@trust-k-yamazaki) on CodePen.
おわりに
ああ、時間がない、
ここらへんまでで！
次回またこれやります！