CSS FW の Sass に乗っかる感じで利用するのが良い。オレオレで CSS プログラムするなんてコストに見合わないし他人に伝わんない。サクッとコンパイル確認したいときは sassmeister.com が便利。
- CSS 拡張
- ネストでセレクタの階層表現
.hoge { .fuga { /** .hoge 配下 .fuga に適用 **/ } }
&による親セレクタ参照@extendはクラス継承的なやつ@extend .another-classみたいにコールして他セレクタのスタイルを継承- コンパイル後の CSS もグルーピングされる
@mixinはトレイト／モジュールみたいなやつ@mixin centering() { margin: auto; }のように定義@include centering();でコールして利用- コンパイル後の CSS はグルーピングされない
- 引数も使える
@mixin grad($color: 'white')
@importで他 SCSS, SASS, CSS ファイルのモジュールインポートpartial( ファイル分割 ) は_file.scssみたいにアンダースコア prefix つける
- ネストでセレクタの階層表現
- 変数
$hoge: 'value'のように数値、文字列、色、真偽、リスト格納可能$hogeで参照、テンプレートリテラルは"color--#{$color}"こんな@debug $fugaでコンパイル時にダンプしてくれる
- データ型
- 文字列は
''で囲わない、普通にhogeで文字列リテラルとして扱われる - リスト
$names: tom, bob, jack;$namesでtom bob jackが出力される ( 意味不明nth($names, 2)でbobが出力される
- マップ
$theme-colors: (white: #eee, black #333)map-get($map, $key);map-merge($map1, $map2);map-keys($map);map-values($map);map-has-key($map, $key);
- 文字列は
- 条件分岐
@if type == white@elseや@else ifもあるよ
- ループ
@for $i from 0 through 9 { 処理 }@while $i < 9 { 処理; $i: $i + 1; }@each $value in $name { #{value} }
- 関数
- 定義
@function foo($aug1,$aug2) { @return $bar } - コール
foo()
- 定義
lighten($color, 10%)darken($color, 30%)