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%)