Skip to content

Instantly share code, notes, and snippets.

@yano3nora
Last active December 25, 2019 02:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yano3nora/16cd333feea1efb96537352066d7f229 to your computer and use it in GitHub Desktop.
Save yano3nora/16cd333feea1efb96537352066d7f229 to your computer and use it in GitHub Desktop.
[sass: Sass as Css Preprocessor] #css #sass

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;
      • $namestom 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment