導入編:Sassの概要と環境構築
  • はじめに
  • Sassとは
  • SassとSCSS
  • 利用する技術・ツール
  • Atomのインストール
  • Node.js、npmのインストール
  • Gulpのインストール
  • はじめてのSass
  • DreamWeaverの設定
  • Preprosのインストール
基礎編:入れ子構造とコメント
  • ネストの基本
  • 隣接セレクタ、間接セレクタ、直下セレクタ
  • 親セレクタの参照
  • プロパティのネスト
  • メディアクエリのネスト
  • @at-rootの使い方
  • コメントの書き方
基礎編:変数と演算の基本
  • 変数の基本
  • 変数のスコープ
  • 演算の基本
基礎編:ファイルの分割とインポート
  • ファイルの分割とパーシャル
  • ネストインポート
  • CSSのインポートとSassのインポート
  • 基礎編のまとめ
応用編:ミックスインと継承
  • ミックスインの基本
  • ミックスインへの引数の指定
  • 複数の引数を指定するミックスイン
  • 可変長引数
  • ミックスインにコンテントブロックを渡す
  • 継承の基本
  • 複数継承と継承の連鎖
  • ミックスインと継承の違いと使い分け
応用編:変数の応用
  • 変数の型
  • インターポレーション
  • !defaultと!global
応用編:制御ディレクティブ
  • 条件分岐
  • 繰り返し処理
応用編:関数
  • 関数の使用
  • 文字、数値処理関数
  • 色処理関数
  • 配列、マップ関数
  • ユーザー定義関数
  • デバッグ用ディレクティブ
応用編:Sassフレームワーク
  • 総合フレームワーク
  • 機能拡張系
  • パーツ系
  • レイアウト系
実践編:開発の実践
  • 設定ファイルからGulp開発環境を作成する
  • Sass Lint
  • PostCSS
  • 開発者ツールとソースマップ
  • Sassを使った実際の開発(ネスト)
  • Sassを使った実際の開発(変数と演算、関数)
  • Sassを使った実際の開発(ミックスインと継承)
  • Sassを使った実際の開発(制御ディレクティブ)
  • Sassを使った実際の開発(レスポンシブ)
まとめ
  • 最後のまとめ
  • ボーナスレクチャー