Cacher is the code snippet organizer for pro developers

OVERVIEW

Sass - sass-lang.com

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

Built-In Modules

Built-In Modules - sass-lang.com

• lighten($color, 10%)
  • sass color geenerator
• darken($color, 30%)