まくまくSassノート

基本

• Sass とは？Sass をインストールする
• SCSS ファイルの書き方の基本
• SCSS ファイルでのコメントの書き方
• Sass のインタラクティブシェルで Sass の演算結果を確認する

変数と値

• SCSS で変数を使用する
• 文字列変数の引用符の展開ルール
• 変数のデフォルト値を設定する (!default)
• リスト変数を使用する
  • リストの表現方法
  • リストをループで処理する (@each)
  • リスト用の関数一覧
• マップ変数を使用する
  • マップの表現方法
  • マップをループで処理する (@each)
  • マップ用の関数一覧

制御構文

• SCSS 内での条件分岐処理 (@if-else, if関数)
• SCSS 内でのループ処理 (@for, @while)

応用

• SCSS ファイルから別の SCSS ファイルをインポートする (@import)
• エクステンドでスタイルを継承する (@extend)
• Mixin でスタイルを組み合わせる (@mixin)
• 関数を定義する (@function)

関数

• 色（カラー値）を扱う関数
  • Color 型変数の定義方法
  • 明度を調整する lighten() / darken()
  • 彩度を調整する saturate() / desaturate()
  • 2つの色の中間色を作成する mix()
• 色（カラー値）を表す定数の一覧

外部リンク

• Sass 関数の一覧