CONTENTS 目次
著者プロフィール

2

はじめに

3

第1章
1-1

Sass のキホン

まずは Sass って何なのかを知ろう ････････････････････････････････････････････ 12
CSS を覚え始めたワクワク感や楽しさがよみがえる Sass ･･････････････････････････････････････
Sass とは？ ････････････････････････････････････････････････････････････････････････････････････････････････
Sass だけど SCSS ？ sass ファイルと scss ファイルの違い ･ ･･････････････････････････････
scss ファイルではブラウザは認識できない ･････････････････････････････････････････････････････････
魅力的な Sass の機能 ････････････････････････････････････････････････････････････････････････････････････
Sass はなぜ誕生したのか ･･･････････････････････････････････････････････････････････････････････････････
Sass の普及率 ･････････････････････････････････････････････････････････････････････････････････････････････

1-2

12
14
15
17
18
20
22

Sass を導入する前の疑問や不安 ･････････････････････････････････････････････････ 23
Ruby の知識は必要？ 黒い画面も使わないとダメなの？ ･･･････････････････････････････････････
エディタやオーサリングツールはそのまま使えるの？ ････････････････････････････････････････････
コラム：著者が使っているエディタ････････････････････････････････････････････････････････････････････
運用時に Sass を使うのは難しいから、Sass は導入できない？ ･･･････････････････････････････
自分以外の関係者が Sass を使えないから、覚えても使えない？ ･･････････････････････････････

1-3

11

23
25
25
26
27

何はともあれ Sass を触ってみよう ････････････････････････････････････････････ 28
Sass に対応しているソースコード共有サービス ･･････････････････････････････････････････････････ 32

第2章
2-1

Sass の利用環境を整えよう

本書で使用する環境について ････････････････････････････････････････････････････････ 34
node-sass（LibSass）について ･････････････････････････････････････････････････････････････････････ 34
Node.js について ･ ････････････････････････････････････････････････････････････････････････････････････････ 36
gulp について ･･････････････････････････････････････････････････････････････････････････････････････････････ 36

2-2

Node.js をインストールする ････････････････････････････････････････････････････････ 37
Node.js のインストール ･････････････････････････････････････････････････････････････････････････････････ 37
コラム：Node.js のバージョン管理について････････････････････････････････････････････････････････ 38

2-3

黒い画面を使ってみよう ･････････････････････････････････････････････････････････････････ 39
ターミナルの起動方法（Mac）･ ････････････････････････････････････････････････････････････････････････ 39
コマンドプロンプトの起動方法（Windows）･･･････････････････････････････････････････････････････ 40
コマンドを入力してみよう ･･････････････････････････････････････････････････････････････････････････････ 41
現在地（カレントディレクトリ）に移動する ･･･････････････････････････････････････････････････････ 42

33

2-4

セットアップ済みの環境をインストールする ･･････････････････････････ 46
サンプルファイルをコピーする ････････････････････････････････････････････････････････････････････････ 46
gulp-cli をインストール ･････････････････････････････････････････････････････････････････････････････････ 47
npm install で一括インストール ･･･････････････････････････････････････････････････････････････････････ 48

2-5

Sass をコンパイルする ･･････････････････････････････････････････････････････････････････ 49
gulp タスクを実行して Sass をコンパイル ･････････････････････････････････････････････････････････ 50
gulp コマンドと gulpfile.js について ･････････････････････････････････････････････････････････････････ 51
Sass と CSS のディレクトリを指定する ････････････････････････････････････････････････････････････ 52
アウトプットスタイルを指定する ･････････････････････････････････････････････････････････････････････ 52
ファイルの更新を監視する ･･････････････････････････････････････････････････････････････････････････････ 55

2-6

セットアップ済みの環境を作成する方法 ･･･････････････････････････････････ 56
package.json の作成 ････････････････････････････････････････････････････････････････････････････････････
gulp と gulp-sass をローカルインストール ････････････････････････････････････････････････････････
コラム：npm install コマンドの小ネタ･･･････････････････････････････････････････････････････････････
gulpfile.js の作成 ･･････････････････････････････････････････････････････････････････････････････････････････

2-7

56
57
58
59

GUI（Prepros）で Sass を使う ･････････････････････････････････････････････････ 61
インストール ･･･････････････････････････････････････････････････････････････････････････････････････････････ 61
プロジェクトの登録 ･･･････････････････････････････････････････････････････････････････････････････････････ 62

Sass ファイルの設定 ･････････････････････････････････････････････････････････････････････････････････････ 63
設定項目 ･････････････････････････････････････････････････････････････････････････････････････････････････････ 63
コンパイルする ････････････････････････････････････････････････････････････････････････････････････････････ 64
プロジェクトの設定 ･･･････････････････････････････････････････････････････････････････････････････････････ 64
フレームワークの使用 ････････････････････････････････････････････････････････････････････････････････････ 65
コラム：GUI コンパイラのデメリット････････････････････････････････････････････････････････････････ 65

2-8Dreamweaver で Sass を使う ････････････････････････････････････････････････････ 66
サイトの定義 ･･･････････････････････････････････････････････････････････････････････････････････････････････ 66
CSS プリプロセッサー設定 ･････････････････････････････････････････････････････････････････････････････ 67
コンパイルする ････････････････････････････････････････････････････････････････････････････････････････････ 69
フレームワークの使用 ････････････････････････････････････････････････････････････････････････････････････ 70

第3章

3-1

これだけはマスターしたい
Sass の基本機能

ルールのネスト（Nested Rules）･･･････････････････････････････････････････････ 72
ネストの基本 ･･･････････････････････････････････････････････････････････････････････････････････････････････ 72
子孫セレクタ以外のセレクタを使うには ･････････････････････････････････････････････････････････････ 74@media のネスト ･････････････････････････････････････････････････････････････････････････････････････････ 75

3-2

親セレクタの参照 &（アンパサンド）･････････････････････････････････････････ 76

3-3

プロパティのネスト（Nested Properties）･････････････････････････････ 79
コラム：-（ハイフン）があるプロパティはすべてネストできる･････････････････････････････････ 80

3-4

Sass で使えるコメント ･･････････････････････････････････････････････････････････････････ 81

71

1 行コメント ････････････････････････････････････････････････････････････････････････････････････････････････ 81
通常のコメント ････････････････････････････････････････････････････････････････････････････････････････････ 81

3-5

変数（Variables）･･････････････････････････････････････････････････････････････････････････････ 83
変数の基本 ･･････････････････････････････････････････････････････････････････････････････････････････････････ 83
変数名で使える文字と使えない文字 ･･･････････････････････････････････････････････････････････････････ 84
ルールセット内で変数を宣言する ･････････････････････････････････････････････････････････････････････ 85
変数の参照範囲（スコープ）･････････････････････････････････････････････････････････････････････････････ 85
変数を参照できる場所 ････････････････････････････････････････････････････････････････････････････････････ 87

3-6演算 ･･･････････････････････････････････････････････････････････････････････････････････････････････････････ 88
演算の基本 ･･････････････････････････････････････････････････････････････････････････････････････････････････ 88
別々の単位で演算する ････････････････････････････････････････････････････････････････････････････････････ 89
変数と演算を同時に利用する ･･･････････････････････････････････････････････････････････････････････････ 90
各演算子の注意点や条件など ･･･････････････････････････････････････････････････････････････････････････ 91
色の演算 ･････････････････････････････････････････････････････････････････････････････････････････････････････ 92

3-7

Sass の @import ･･････････････････････････････････････････････････････････････････････････････ 93@import の概要 ･･･････････････････････････････････････････････････････････････････････････････････････････ 93
CSS ファイルを生成しない、パーシャル ････････････････････････････････････････････････････････････ 95
インポートファイルの複数指定 ････････････････････････････････････････････････････････････････････････ 96@import の指定位置 ･･････････････････････････････････････････････････････････････････････････････････････ 96

第4章

4-1

高度な機能を覚えて
Sass を使いこなそう

スタイルの継承ができるエクステンド（@extend）･ ･････････････ 98
エクステンドの基本 ･･･････････････････････････････････････････････････････････････････････････････････････
同じルールセット内で、複数継承する ････････････････････････････････････････････････････････････････
エクステンドの連鎖 ･･･････････････････････････････････････････････････････････････････････････････････････
エクステンドが使えるセレクタ ････････････････････････････････････････････････････････････････････････
エクステンド専用のプレースホルダーセレクタ ････････････････････････････････････････････････････@media 内ではエクステンドは使用できない ･･･････････････････････････････････････････････････････
警告を抑止する !optional フラグ ･･････････････････････････････････････････････････････････････････････

4-2

97

98
99
100
101
102
103
105

柔軟なスタイルの定義が可能なミックスイン（@mixin）･････ 106
ミックスインの基本 ･･･････････････････････････････････････････････････････････････････････････････････････ 106
引数を使ったミックスイン ･･････････････････････････････････････････････････････････････････････････････ 107
引数に初期値を定義する ･････････････････････････････････････････････････････････････････････････････････ 109
引数を複数指定する ･･･････････････････････････････････････････････････････････････････････････････････････,（カンマ）を使うプロパティには可変長引数を利用する ････････････････････････････････････････
複数の引数があるミックスインを読み込む際に可変長引数を使う ･････････････････････････････
ミックスインのスコープ（利用できる範囲）を制限する ･････････････････････････････････････････
ミックスインにコンテントブロックを渡す @content ････････････････････････････････････････････
ミックスイン名で使える文字と使えない文字 ･･･････････････････････････････････････････････････････

4-3

110
111
113
114
115
117

ネストしているセレクタをルートに戻せる @at-root ･･･････････ 118@at-root の基本的な使い方 ･････････････････････････････････････････････････････････････････････････････ 118

複数のルールセットに @at-root を適用する ････････････････････････････････････････････････････････ 118@at-root をメディアクエリ内で使った場合 ･････････････････････････････････････････････････････････ 119@at-root のオプション @at-root (without: ...) ････････････････････････････････････････････････････ 120@at-root のオプション @at-root (with: ...) ･････････････････････････････････････････････････････････ 121

4-4

Sass のデータタイプについて ･ ････････････････････････････････････････････････････ 122
データタイプの種類 ･･･････････････････････････････････････････････････････････････････････････････････････ 122
データタイプを判別する ･････････････････････････････････････････････････････････････････････････････････ 124

4-5

制御構文で条件分岐や繰り返し処理を行う ･･････････････････････････････ 127@if を使って条件分岐をする ････････････････････････････････････････････････････････････････････････････@for で繰り返し処理を行う ･････････････････････････････････････････････････････････････････････････････@while でより柔軟な繰り返し処理を行う ･･･････････････････････････････････････････････････････････@each でリスト（配列）の要素に対して繰り返し処理を実行する ････････････････････････････

4-6

127
130
132
133

関数を使ってさまざまな処理を実行する ･･･････････････････････････････････ 135
関数とは？ ･･････････････････････････････････････････････････････････････････････････････････････････････････ 135
数値の絶対値を取得する abs() ･････････････････････････････････････････････････････････････････････････ 136
数値の小数点以下を四捨五入する round() ･･･････････････････････････････････････････････････････････ 136
数値の小数点以下を切り上げる ceil() と数値の小数点以下を切り捨てる floor() ･････････････ 137

16 進数の RGB 値に透明度を指定して、RGBA 形式に変換できる rgba() ･･･････････････････
明るい色を簡単に作れる lighten() と暗い色を簡単に作れる darken() ･････････････････････････
2 つのカラーコードの中間色を作れる mix() ･････････････････････････････････････････････････････････
リストの N 番目の値を取得できる nth() ･･････････････････････････････････････････････････････････････
指定したキーの値を取得する map-get() ･････････････････････････････････････････････････････････････
セレクタを置換する selector-replace() ･･････････････････････････････････････････････････････････････

4-7

自作関数を定義する @function ･･･････････････････････････････････････････････････ 144@function とは ････････････････････････････････････････････････････････････････････････････････････････････
オリジナル関数の例 ･･･････････････････････････････････････････････････････････････････････････････････････
ネイティブ関数と組み合わせる ････････････････････････････････････････････････････････････････････････
値を変数に入れる ･････････････････････････････････････････････････････････････････････････････････････････
引数に初期値を設定する ･････････････････････････････････････････････････････････････････････････････････

4-8

138
139
140
141
141
143

144
145
145
146
146

テストやデバッグで使える @debug、@warn、@error ･･････ 147@debug で結果を確認する ･････････････････････････････････････････････････････････････････････････････ 147@warn で警告を表示する ･･･････････････････････････････････････････････････････････････････････････････ 148@error でエラーを出力し処理を中断する ････････････････････････････････････････････････････････････ 150

4-9

使いどころに合わせて補完（インターポレーション）してくれる #{ } ･･････････････････････ 151
インターポレーションとは ･･････････････････････････････････････････････････････････････････････････････
演算しないようにする ････････････････････････････････････････････････････････････････････････････････････
演算できない場所で演算する ･･･････････････････････････････････････････････････････････････････････････
アンクォートもしてくれるインターポレーション ･････････････････････････････････････････････････

151
152
152
153

4-10 変数の振る舞いをコントロールする !default と !global ･ ････ 154!default フラグ ･････････････････････････････････････････････････････････････････････････････････････････････ 154!global フラグ ･･････････････････････････････････････････････････････････････････････････････････････････････ 155

第5章

5-1

現場で使える
実践 Sass テクニック157

管理 / 運用・設計で使えるテクニック ･･･････････････････････････････････････ 158
ネストが深すぎると生じる問題を把握して、バランスを見ながら利用する ･･････････････････ 158
コラム：ネストは何階層までがよいか･････････････････････････････････････････････････････････････････ 160

CSS とは違うパーシャルによる Sass ファイルの分割 ･･･････････････････････････････････････････ 161
サイトの基本設定を変数にして一元管理する････････････････････････････････････････････････････････ 163
複数人で制作する場合は、各自の Sass ファイルを用意する ･･･････････････････････････････････ 164
コメントを活用してソースをわかりやすくする ････････････････････････････････････････････････････ 165
大規模サイトで活用できる @import のネスト･･････････････････････････････････････････････････････ 166

SASS 記法も使ってみよう ･･････････････････････････････････････････････････････････････････････････････ 168&（アンパサンド）を活用して BEM 的な設計を快適に ･･････････････････････････････････････････ 170@keyframes をルールセット内に書いて関係性をわかりやすくする ･･････････････････････････ 173
エクステンドはスコープを決めて利用する ･･････････････････････････････････････････････････････････ 174
EditorConfig と stylelint でコーディングルールを統一する ････････････････････････････････････ 176
stylelint でコードを解析しエラーを表示する ･･･････････････････････････････････････････････････････ 177
コラム：他の人を思いやって Sass 設計をしよう･･･････････････････････････････････････････････････ 178

5-2

レイアウト・パーツで使えるテクニック ･･･････････････････････････････････ 179
clearfix をミックスインで活用する ･･･････････････････････････････････････････････････････････････････ 179
変数を使って、サイドバーの幅を自動的に計算する ･･･････････････････････････････････････････････ 181
null で簡単に条件分岐をしてレイアウトをする ･ ･･･････････････････････････････････････････････････ 182
calc と Sass を組み合わせて四則演算を便利に使う ･･････････････････････････････････････････････@for を使って余白調整用の class を生成する ･･････････････････････････････････････････････････････
リストマーカー用の連番を使った class 名を作成する ････････････････････････････････････････････
連番を使った class 名のゼロパディング（0 埋め）をする ･ ･････････････････････････････････････
文字リンクカラーのミックスインを作る ･････････････････････････････････････････････････････････････
複数の値を @each でループし、ページによって背景を変更する ･･････････････････････････････
シンプルなグラデーションのミックスインを作る ･････････････････････････････････････････････････

Map 型と @each を使って SNS アイコンを管理する ････････････････････････････････････････････
値が比較しづらい z-index を Map 型で一括管理する ････････････････････････････････････････････@function を使って px 指定する感覚でフォントサイズを rem 指定する･････････････････････
ネストしたセレクタを selector-replace() を使って書き換える ････････････････････････････････
selector-extend() を使い、親セレクタだけ変更して同一スタイルを適用させる ･･･････････

5-3

184
186
188
189
190
192
194
196
201
202
203
206

スマホ・マルチデバイス、
ブラウザ対応で使えるテクニック ････････････････････････････････････････････････ 208
スマホサイトでよく見る、リストの矢印をミックスインで管理する ･･･････････････････････････ 208
埋め込み動画のアスペクト比計算に percentage() を使って楽をする ･････････････････････････ 210
メディアクエリ用のミックスインを作成して楽々レスポンシブ対応 ･･･････････････････････････ 212
マップのキーの有無を map-has-key() で判定してわかりやすいエラー表示にする ････････ 214
CSS ハックをミックスインにして便利に使う ･･････････････････････････････････････････････････････ 216
Retina ディスプレイなど、高解像度端末の対応を楽にする ･････････････････････････････････････ 218

5-4

gulp のタスクを追加してもっと便利な環境にする ････････････････ 219
glob でパーシャルファイルを一括で読み込む ･･････････････････････････････････････････････････････ 219
ソースマップでコンパイル前のソースの場所を知る ･･･････････････････････････････････････････････ 221
エラー時に Watch を停止させずに自動コンパイルを継続させる ･･･････････････････････････････ 223

エラーに気付きやすくするために通知を出す ･･･････････････････････････････････････････････････････ 224

5-5

PostCSS で Sass をさらに便利にする ･ ･･･････････････････････････････････ 226
PostCSS とは ･････････････････････････････････････････････････････････････････････････････････････････････ 226
ベンダープレフィックスを自動付与する ･････････････････････････････････････････････････････････････ 229
画像名だけで画像のパスやサイズを取得する ･･･････････････････････････････････････････････････････ 232
CSS プロパティの記述順を自動でソートする ･･････････････････････････････････････････････････････ 238
バラバラになったメディアクエリをまとめてコード量を削減してスッキリさせる ･････････ 240

第6章

6-1

もっと Sass を便利にする
フレームワークやツール

243

Sass のフレームワーク紹介 ･･････････････････････････････････････････････････････････ 244
総合フレームワーク ･･･････････････････････････････････････････････････････････････････････････････････････ 244
機能拡張系 ･･････････････････････････････････････････････････････････････････････････････････････････････････ 246
パーツ系 ･････････････････････････････････････････････････････････････････････････････････････････････････････ 247
レイアウト系 ･･･････････････････････････････････････････････････････････････････････････････････････････････ 248

6-2

Sass の GUI コンパイラ ････････････････････････････････････････････････････････････････ 249
Windows/Mac 両対応 ･･･････････････････････････････････････････････････････････････････････････････････ 249
Mac のみ対応 ･･････････････････････････････････････････････････････････････････････････････････････････････ 250

第7章
7-1

Sass 全機能リファレンス

Sass の基本と高度な機能 ･･････････････････････････････････････････････････････････････ 252
CSS の拡張機能（CSS Extensions）････････････････････････････････････････････････････････････････
Sass のコメント ･･････････････････････････････････････････････････････････････････････････････････････････
Sass スクリプト ･･････････････････････････････････････････････････････････････････････････････････････････@ ルールとディレクティブ ･･････････････････････････････････････････････････････････････････････････････
制御構文 ･････････････････････････････････････････････････････････････････････････････････････････････････････
ミックスイン ･･･････････････････････････････････････････････････････････････････････････････････････････････
関数の定義 ･･････････････････････････････････････････････････････････････････････････････････････････････････

7-2

251

252
253
253
255
257
258
258

Sass の関数一覧 ･･･････････････････････････････････････････････････････････････････････････････ 259
RGB 形式の色を操作する関数 ･･････････････････････････････････････････････････････････････････････････ 259
HSL 形式の色を操作する関数 ･･････････････････････････････････････････････････････････････････････････ 260
透明度を操作する関数 ････････････････････････････････････････････････････････････････････････････････････ 263
その他の色を調整する関数 ･･････････････････････････････････････････････････････････････････････････････ 264
文字列を操作する関数 ････････････････････････････････････････････････････････････････････････････････････ 265
数値を操作する関数 ･･･････････････････････････････････････････････････････････････････････････････････････ 267
リストを操作する関数 ････････････････････････････････････････････････････････････････････････････････････ 268
Map 型を操作する関数 ･･････････････････････････････････････････････････････････････････････････････････ 270
セレクタを操作する関数 ･････････････････････････････････････････････････････････････････････････････････ 272
チェック関係の関数 ･･･････････････････････････････････････････････････････････････････････････････････････ 274
内部的な値を確認する関数 ･･････････････････････････････････････････････････････････････････････････････ 276
その他の関数 ･･･････････････････････････････････････････････････････････････････････････････････････････････ 277

7-3

Sass の拡張 ････････････････････････････････････････････････････････････････････････････････････････ 278
自作関数を Ruby で定義する ･･･････････････････････････････････････････････････････････････････････････ 278
キャッシュの保存場所 ････････････････････････････････････････････････････････････････････････････････････ 278
インポートをカスタム ････････････････････････････････････････････････････････････････････････････････････ 278

付録：コマンド一覧

280

付録：用語集

282

索引

290

第1 章

Sass のキホン
第 1 章では、 Sass の魅力や概要などに関して説明していきます。まずは、 Sass がどんなものかを知り、導入する前の疑問や不安などを解決しましょう。本章を読み終えるころには、 Sass の魅力を知り「今すぐにでも使いたい！」と思っていただけるでしょう。

1-1

まずは Sass って何なのかを知ろう

12

1-2

Sass を導入する前の疑問や不安

23

1-3

何はともあれ Sass を触ってみよう

28

CHAPTER

1

1

1

まずは Sass って何なのかを知ろう
最初に「そもそも Sass とはどういったもので、どんなことができるのか」といった Sass の魅力をお伝えしていきます。すでに Sass のことを知っていて「早く導入したい！」と思っている方は、本章は読み飛ばして第 2 章（P.33）から読み始めましょう。

CSS を覚え始めたワクワク感や楽しさがよみがえる Sass
Sass（サス）を利用することで、いくら CSS をより便利に効率的に書けるといっても、普段の CSS によるコーディングで問題なく業務がこなせていれば、慣れの問題や、「CSS をプログラムのように書けたら便利になる！」などとはあまり考えられず、CSS が不便だとは思わないかもしれません。 実際、著者の二Sass のキホン

人もはじめて Sass の存在を知ったときは、必要性をあまり感じず、すぐには導入しませんでした。
それは、主に次のような理由からでした。

導入しない理由
・今の CSS で十分間に合っている
・そこまで CSS に不便さや手間を感じていない・得られるメリットより学習コストのほうが高い気がする・プログラムが書けないとメリットが少ない、使いこなせない

12・Ruby や黒い画面を使う必要がある
・普段、コーディングメインで作業していない・環境に依存するから実務では使いにくい・開発元が英語で、日本語の情報が少ない... などこういった理由から、アンテナの高い一部の人たちが導入していることは知っていても、自分たちにはあまり関係ないというイメージでした。 本書を手に取っていただいている皆さんも、Sass という言葉を聞いたことがあっても、実際に試してみたことのある方は少ないのではないでしょうか？
著者の二人も、最初は簡単な機能を使うだけで、「導入コストに比べて実務レ
ベルで使えるほどの利点があるの？」と思っていました。 しかし、いまや Sassの魅力に取り憑かれてしまったので、通常の CSS が不便に感じてしまうほどです。実際に Sass でどんなことができるのかは、本節の「魅力的な Sass の機能」
（P.18）で紹介しています。

Sass は、その魅力よりも先に、導入のハードルの高さや開発環境の依存、学習コストのほうに目が行ってしまうため、ちょっと見ただけでは魅力が伝わりにくい気がしています。
確かに、決して学習コストは低いとはいえませんし、他のライブラリやツー
ル、ソフトに比べて導入のハードルが高いのは事実です。 しかし、昨今ではユーザーも増え、日本語の情報もとても増えてきたことで、導入のハードルも下がり、Sass は通常の CSS よりも多く利用されているほど普及しています。詳しくは本節最後の「Sass の普及率」（P.22）を参照してください。
社やクックパッド株式会社が有名）でも Sass の導入が進んでおり、Sass を扱えることで、転職や就職に有利になることは間違いないでしょう。 求人情報サイトなどで Sass を「必要なスキル」や「歓迎スキル」として掲載している企業も多数存在しています。
このような就職や仕事上有利になるなどのメリットもありますが、Sass が与えてくれる一番の恩恵は、「CSS を覚え始めたころの、ワクワク感や楽しさを思い出させてくれること」だと思っています。 覚えることは少なくないので、最初は慣れない書き方に戸惑ったり、試行錯誤を繰り返して、効率が落ちてしまった
りすることもあると思いますが、そこで諦めず、ほんの少しがんばるだけで、今までの CSS とは違った世界が見えてきます。

1-1 まずは Sass って何なのかを知ろう

中小企業に比べてガイドラインの変更が容易ではない大手企業（LINE 株式会

次項からは、そんな Sass の魅力について触れていきます。まずは Sass がど
ういったものか、どんなことができるのかを見ていきましょう。

13

CHAPTER

1

Sass とは？
Sass は魅力的と書きましたが、そもそも Sass って何？と思われるかもしれ＊ヒント 1
CSS を拡張したメタ言語
を CSS メタ言語と表記して い ま す。 ま た、「CSSプ リ プ ロ セ ッ サ 」や「AltCSS」などと呼ばれることもありますが、これらはほぼ同様の意味で扱われます。
昨今では、CSS メタ言語
より CSS プリプロセッサと呼ぶことが多くなっています。

ません。Sass とは、CSS を拡張したメタ言語 *1 です。
メタ言語と聞いてもあまりなじみがないと思いますが、メタ言語とは「ある言語について何らかの記述をするための言語」で、Sass の場合は「CSS に対して機能を拡張した言語」ということになります。 小難しい話を抜きにすれば、Sass は CSS をより便利に効率的に書けるように大幅にパワーアップさせた言語
です。

パワ
アッ ー
プ

Sass のキホン

Sass

CSS

Sass は「Syntactically Awesome Stylesheets」の略で、日本語に訳すと「構文的にイケてるスタイルシート」という意味になります。 構文的にイケてるとい
われても、CSS ってそんなにイケてないの？といった疑問を持つ方もいると思います。CSS は広く普及させる目的もあって、書式自体は非常にシンプルになっており、プロパティなどを 1 つ

1 つ覚えていけば誰にでも習得できるようになっています。
しかし、それゆえに複雑なことができないという側面もあり、コードの再利用や、変数、演算、条件分岐などのプログラムでは当たり前のように使える機能がありませんでした。そのCSS の弱点を補う目的で誕生したのが Sass なのです 図 1 。

14

図1

Sass の公式サイト（2017 年 8 月現在）
http://sass-lang.com/

第2 章

Sassの利用環境を整えよう

第 2 章では、 Sass のインストールから実際に動作させるまでを説明します。 Sass を使うにあたって、 1 番の障壁ともいえるのがこのインストール作業ですが、インストール自体は手順を追っていけば誰でも簡単にできます。慣れてしまえば数分で終わる作業です。
一度インストールが完了してしまえば、その後の作業は大して面倒なことはありません。 最初はちょっと面倒ですが、焦らずに進めていきましょう。

2-1

本書で使用する環境について

34

2-2

Node.js をインストールする

37

2-3

黒い画面を使ってみよう

39

2-4

セットアップ済みの環境をインストールする

46

2-5

Sass をコンパイルする

49

2-6

セットアップ済みの環境を作成する方法

56

2-7

GUI（Prepros）で Sass を使う

61

2-8

Dreamweaver で Sass を使う

66

CHAPTER

2

2

1

本書で使用する環境について
本書では node-sass で Sass をコンパイルします。そのために
Node.js をインストールします。また、タスクランナーには gulpを使います。ここでは、それぞれの簡単な紹介と、選定理由について解説します。
Sass のインストールおよび使用には、コマンドラインツールを使用します。

ヒント＊ 1

Sass の利用環境を整えよう

正式には CUI（Character
User Interface）と 呼 ばれ、キーボードだけで操作をするインターフェースのことです。それに対しマウスなどを使って操作するインターフェース
は GUI（Graphical User
Interface）と呼ばれます。

いわゆる " 黒い画面 " と呼ばれているものです *1。Sass の実行そのものは 1 行のコマンドを入力するだけなので、難しいことはありません。しかし、「どうしても黒い画面を使いたくない！ GUI がいい！」という方もいるかもしれません。その場合はここは軽く目を通していただくにとどめ、「GUI（Prepros）で Sass を使う」（P.61）または「Dreamweaver で Sass を使う」
（P.66）から始めていただいても構いません。

node-sass（LibSass）について
LibSass

現在、Sass は大きく分けて 2 つの Sass が存在します。それが Ruby Sass とLibSass です。Ruby Sass は、その名の通り Ruby で開発・動作する従来からある Sass です。LibSass とは、C/C++ で開発された Sass です。

LibSass が作られた理由は、Ruby に依存せずさまざまな言語で Sass が使えるようにするためです。本書では Node.js で使いますが他にも PHP や Python、34

Scala などで使えます。そして、Ruby でも LibSass を使うことができます。
LibSass を使うメリットとして 1 番に挙げたいのが、コンパイルの速度です。
Ruby Sass より圧倒的に速いです。
数年前から LibSass は存在しましたが、Ruby Sass との互換性が不足しており、使えない機能などがありました。しかし LibSass バージョン 3.3 以降、互換＊

ヒント 2
68 項目のテスト結果なの性がほぼ 100%*2 となり 図 1 、多くの方が Ruby Sass から LibSass へ移行しています。

で、一部新機能などが動
作 し な か っ た り、Ruby
Sass とコンパイル結果が異なったりする場合も
あります。

図1

Ruby SassとLibSassの互換性を比較するサイトSass Compatibility（http://sass-compati
bility.github.io/) によると、LibSass 3.3 の互換性は 100%となっている。

node-sass は、LibSass を Node.js で動作できるようにしたライブラリです。
つまり、Node.js 環境があれば Sass を使うことができます。
本書では基本的に node-sass を使用
して Sass をコンパイルしています（一部新機能などは Ruby Sass で検証しています）。

2-1 本書で使用する環境について

node-sassnode-sass を イ ン ス ト ー ル す る と「node-sass」コマンドが使えるようになり、黒い画面から Sass をコンパイルすることができます。
フロントエンド界隈では、LibSassといえば node-sass を指すことが多いです。

35

CHAPTER

Node.js について2

node-sass を 動 作 さ せ る た め に 必 要 な
も の が Node.js で す。Node.js は、Java

Script で作られたサーバーサイド環境で、現在のモダンフロントエンド開発においてなくてはならない存在となっています。

Node.js をインストールすることで使えるようになるパッケージ管理マネージャの npm（Node Packaged Modules）
は、世界で最も大きなライブラリエコシステムで、npm コマンドで簡単に必要なパッケージをインストールしたり、環境の共有を行うことができます。
ヒント＊ 3
PostCSS については第 5

本書で紹介する node-sass も gulp も PostCSS*3 も npm コマンドでインストー
ルをします。なので、まずは Node.js をマシンにインストールしてみましょう。

章で紹介しています。
詳しくは

P.226

Sass の利用環境を整えよう

gulp について
ヒント＊ 4
厳密にはストリーミング
ビルドシステムと名乗っています。

gulp はタスクランナーです *4。タスクランナーとは、さまざまな処理（タスク）を自動化してくれるツールで、

Sass のコンパイルも処理の 1 つとして指定できます。
例えば、Sass をコンパイルし、ベンダープレフィック
スを付与、CSS を圧縮、ローカルサーバーを立ち上げる。

＊

ヒント 5
gulp の タ ス ク を 追 加 し、より便利に活用する方法
は第 5 章にて紹介してい
ます。
詳しくは

P.219

といったことをコマンド 1 つで実行できます *5。

gulp は、gulpfile.js というファイルに JavaScript でタスクを書き込むことで、その通りに処理を実行してくれます。つまり gulpfile.js があればタスクを共有することも可能です。
本書が gulp を採用した理由は、gulpfile.js の書きやすさとタスクの数、そして安定した人気です。
このようなタスクランナーは、以前は Grunt が主流でした。最近は Webpackというビルドツールも人気です。フロントエンドのトレンドの移り変わりは早いので今後どのようなツールが主流になるかわかりませんが、使い方に大きな差はありません。まずは gulp でタスクランナーに慣れてみましょう。

36

2

2

Node.js をインストールする
node-sass を使えるようにするために、まずは Node.js をインス
トールしましょう。

Node.js のインストール
Node.js の公式サイトよりインストーラーをダウンロードしましょう 図 2 。

ヒント＊ 6Long-term Support。長期サポートバージョンの
こ と で す。Node.js は 偶
数バージョンが LTS、奇数バージョンが最新機能版となります。

Node.js 公式サイト（https://nodejs.org/）

2-2 Node.js をインストールする

図2

ダウンロードボタンが 2 つあり、左が安定版である LTS*6、右が開発最新版となっています。今回は、LTS を選択します。
執筆時（2017 年 8 月）は v6.11.0 が LTS の最新バージョンでしたので、そちらをダウンロードしました。本を読んでいる時期でバージョンは変わると思いますが、最新の LTS をダウンロードしてください。
それぞれの OS のインストーラーがダウンロードされるので実行しましょう
図3

図4 。

37

CHAPTER

2
図3

Macインストーラー画面

図4

Windowsインストーラー画面

基本的には「次へ」を進めていけばインストールは完了です。

Sass の利用環境を整えよう

ColumnNode.js のバージョン管理について
本書では簡単に Node.js 環境を構築するために、本家 Node.js サイトからインス
トーラーを使って、LTS の最新バージョンをインストールしました。もちろんそれで問題はありませんし、新しいバージョンを再度インストールすれば更新されます。
しかし、Node.js は約半年に 1 回のペースでバージョンが更新されるので、複数＊

ヒント 7
https://github.com/
marcelklehr/nodist

ヒント＊ 8https://github.com/
riywo/ndenv

38のプロジェクトが平行している場合、同時に複数のバージョンを使う場合があるかもしれません。
そんなときはバージョン管理ツールを使いましょう。Windows では「Nodist*7」、

Mac では「ndenv*8」がオススメです。コマンドでバージョン切り替えもできま
すし、「.node-version」というバージョンナンバーを書いたテキストファイルがカレントディレクトリにあるとバージョンを自動切り替えしてくれます。

第3 章

これだけは
マスターしたいSassの基本機能
Sass のインストールが完了して環境が整ったところで、第 3 章では Sass の基本機能に関して説明していきます。本章を読みながら実際に Sassを書いてみることで、より理解が深まって Sass の魅力に気付けるでしょう。

3-1

ルールのネスト（Nested Rules）

72

3-2

親セレクタの参照 &（アンパサンド）

76

3-3

プロパティのネスト（Nested Properties）

79

3-4

Sass で使えるコメント

81

3-5

変数（Variables）

83

3-6

演算

88

3-7

Sass の @import93

CHAPTER

3

3

1

本節のサンプルコード
http://book2.scss.jp/
code/c3/01.html

ルールのネスト（Nested Rules）
ネストは、Sass の中でも一番よく使う機能で、CSS を HTML の構造に合わせて入れ子で書いていくことができます。慣れてくれば何も考えずに使えるようになるでしょう。

ネストの基本
ネストの記述方法を知る前に、まずは、次の HTML にスタイルを適用する場
合を見てみましょう。
HT M L

これだけはマスターしたいSass の基本機能<div id="main"><section><h1> 見出し </h1><p> 段落 </p><p class="notes"> 注意書き </p><ul><li> リスト </li></ul></section><section><h1> 見出し </h1><p> 段落 </p></section><!-- / #main --></div>
通常の CSS の場合は、次のようにそれぞれの要素にスタイルを指定するために、子孫セレクタを使い、HTML の階層をたどって書いていくことが多いと思
います。

72

C SS

#main section {margin-bottom: 50px;}#main section h1 {
font-size: 140%;}#main section p, #main section ul {margin-bottom: 1.5em;}#main section p.notes {color: red;}#main section 内の各要素にスタイルを指定するために、毎回同じセレクタを
コピー＆ペーストして最後の要素だけ変更しています。CSS に慣れている方な
ら、当たり前のように手が動くと思いますので、セレクタを親から書くことやコ
ピー＆ペーストが気にならないかもしれません。しかし、次のように Sass のネストを使うと、これらのコピー＆ペーストから開放されて階層構造も把握しやす
くなります。

3-1 ルールのネスト（Nested Rules）

S a ss#main {
section {margin-bottom: 50px;
h1 {font-size: 140%;}p, ul {
margin-bottom: 1.5em;}
p.notes {color: red;}}}

CSS と比べ、#main section を何度も書かなくていいので、すっきりしたことがわかると思います。 ネストは、このようにセレクタの後の { ～ }（波括弧）の中に次のルールセットを書くといった具合に、入れ子にして書いていくことができます。また、インデントすることで HTML のツリー構造と同じ形式になる
ので、構造の把握が容易になります。なお、インデントや改行に Sass 独自のルールはないので、自分が見やすいようにインデントや改行をしても問題ありません。

73

CHAPTER

3

3

2

本節のサンプルコード
http://book2.scss.jp/
code/c3/02.html

親セレクタの参照 &（アンパサンド）
本節では、親のセレクタの参照ができる &（アンパサンド）に関して説明します。
ネストを使って書いていると、さらに親のセレクタからスタイルを指定するにはどうするかという疑問が生じます。例えば、サイドバーの横幅をトップページ
だけ広くしたい場合、CSS では次のように書くことがあります。
C SS

これだけはマスターしたいSass の基本機能#side {
width: 240px;}
body.top #side {width: 300px;}#side ul.bnr {margin-bottom: 10px;}
これを Sass のネストを使って書く場合、ネストの基本だけで書くとおそらく次のようになるでしょう。
S ass#side {
width: 240px;
ul.bnr {margin-bottom: 10px;}}
body.top #side {width: 300px;}
この書き方でも期待した結果は得られますが、#side 内のネストやルールセッ
トが増えれば増えるほど、body.top #side のスタイルが下に行ってしまい可読
性が悪くなってしまいます。そういった場合に使えるのが &（アンパサンド）を使った親セレクタの参照です。

76

第4 章

高度な機能を覚えてSassを使いこなそう
ここからはより高度な Sass の機能を説明していきます。プログラム的な内容も出てくるので、プログラムになじみのない方には、少し難しく感じる部分もあるかもしれませんが、 簡単なところから順番に学んでいけば
ちゃんと使えるようになります。覚えることも多いですが、Sass の最も魅力的な機能が詰まったところです。得られるメリットも非常に大きいですから、ぜひ習得して使いこなせるようになりましょう。

4-1

スタイルの継承ができるエクステンド（@extend）

98

4-2

柔軟なスタイルの定義が可能なミックスイン（@mixin）

106

4-3

ネストしているセレクタをルートに戻せる @at-root

118

4-4

Sass のデータタイプについて

122

4-5

制御構文で条件分岐や繰り返し処理を行う

127

4-6

関数を使ってさまざまな処理を実行する

135

4-7

自作関数を定義する @function

144

4-8

テストやデバッグで使える @debug、@warn、@error

147

4-9

使いどころに合わせて補完（インターポレーション）してくれる #{}151

4-10 変数の振る舞いをコントロールする !default と !global

154

CHAPTER

4

4

1

本節のサンプルコード
http://book2.scss.jp/
code/c4/01.html

スタイルの継承ができる
エクステンド（@extend）
エクステンドは高度な機能として紹介していますが、使い方や書き方は難しくありませんし、Sass を扱う上では重要な機能の 1 つなので、ぜひマスターしましょう。

エクステンドの基本
エクステンドとは、ひと言で説明すると、指定したセレクタのスタイルを継承することができる機能です。
「継承」と聞いても少しわかりにくいと思いますので、まずは次の例を見てみましょう。

高度な機能を覚えて Sass を使いこなそうS a ss.box {
margin: 0 0 30px;
padding: 15px;
border: 1px solid #ccc;}

C SS（コンパイル後）.box, .item {margin: 0 0 30px;
padding: 15px;
border: 1px solid #ccc;}// .box で使ったスタイルを継承.item {
@extend .box;}.box で使ったスタイルを .item にも継承するために、「@extend セレクタ ;」というルールで記述しています。
コンパイル後の CSS を見ていただくと、2 つのセレクタがグループ化されたのが確認できると思います。エクステンドは、このように一度使ったスタイルを継承して使いまわすことができるので、継承する数が増えれば増えるほど記述量を減らすことができ、同じスタイルを何度も書かずに済むようになります。
エクステンドの基本的な使い方はこれだけなので、思ったより簡単に使えることがわかるでしょうか。

98

同じルールセット内で、複数継承する
先ほどの例では、1 つのルールセット内では 1 つのエクステンドしか使っていませんでしたが、エクステンドは複数指定することもできます。
指定方法はいたってシンプルで、単純にエクステンドを複数回書けば、それぞれのスタイルを継承してくれます。

C SS（コンパイル後）

S a ss// エクステンド.notes {color: #d92c25;
font-weight: bold;text-align: center;}.bd {border-top: 1px solid #900;
border-bottom: 1px solid #900;}.notes, .item small {color: #d92c25;
font-weight: bold;text-align: center;}// 複数継承.item {
small {
display: block;
padding: 10px;@extend .notes;@extend .bd;}}

.item small {display: block;
padding: 10px;}.bd, .item small {border-top: 1px solid #900;
border-bottom: 1px solid #900;}

ンドを複数指定しています。

CSS（コンパイル後）を見ていただくと、.notes と .bd それぞれに、.item
small がグループ化され、.item small に指定したスタイルだけが別で生成されたのが確認できます。
このように複数の継承も問題なく行えますが、継承する数が増えてプロパティ
がバッティングした場合、CSS の個別性の計算通りに、後から書かれたスタイ

4-1 スタイルの継承ができるエクステンド（@extend）.notes と .bd のスタイルを継承するため、.item small に対して、エクステ

ルが優先されるので注意しましょう。

99

CHAPTER

4

4

2

本節のサンプルコード

柔軟なスタイルの定義が可能なミックスイン（@mixin）
本節では、Sass の中でも一番強力な機能として取り上げられることが多いミックスインに関して説明します。

http://book2.scss.jp/
code/c4/02.html

ミックスインの基本
ミックスインの機能を簡単に説明すると、スタイルの集まりを定義しておき、それを他の場所で呼び出して使うことができるというものです。また、引数を指定することで、定義したミックスインの値を一部変更して使うといった、非常に柔軟で強力な処理が可能です。
「ミックスインはエクステンドとの違いがイマイチわからない」という声をよ高度な機能を覚えて Sass を使いこなそう

く聞きます。確かに、スタイルを任意の場所で呼び出して使うという点では似ていますが、両者の機能は明確に違います。はじめは違いがわかりにくいかもしれませんが、少しずつ理解していきましょう。
まずは、基本的なミックスインの使い方を見てみましょう。
S a ss// ミックスインを定義@mixin boxSet {padding: 15px;
background: #999;
color: white;}
ミックスインは、@mixin の後に半角スペースを空けて任意のミックスイン名を定義します。そして、{ ～ （} 波括弧）内にスタイルを書いていきます。
エクステンドは、一度使ったスタイルを継承するために使いましたが、ミック
スインの場合は、スタイルを定義しているだけなので、呼び出さない限りは何も起こりません。定義したミックスインを呼び出す際は、次のように「@include
ミックスイン名 ;」と書きます。

106

S ass// 定義したミックスインを呼び出し.relatedArea {@include boxSet;}

C SS（コンパイル後）.relatedArea {padding: 15px;
background: #999;
color: white;}

ミックスインはこのように「@mixin」と「@include」をセットで使います。
あらかじめ定義したミックスインが .relatedArea に展開されたことがわかります。しかしこの例を見ただけだと、エクステンドとの違いがわからないと思います。実際にこれをエクステンドで書き直しても同じCSSが生成されます。では、エクステンドとの違いがわかるように定義したミックスインは最初の例と同じとして、ルールセットが 1 つ増えた場合の例を見てみましょう。
S ass// 定義したミックスインを呼び出し.relatedArea {@include boxSet;}

エクステンドでは （, カンマ）区切りでグループ化されたのに対して、ミックス
インでは、まったく同じスタイルが .relatedArea と .pickupArea に展開されました。これで生成される CSS の違いはわかったかと思います。
しかし、現時点ではエクステンドの方が合理的なソースになるため、ミックス
インのメリットが見えてこないと思います。ですので、次項からは、エクステン
ドとの明確な違いやメリットを見ていきましょう。

引数を使ったミックスイン
先ほどまでの例では、エクステンドとの違いやメリットがイマイチわからなかったと思いますが、冒頭で軽く触れたように「引数」を使うことで、エクステ

4-2 柔軟なスタイルの定義が可能なミックスイン（@mixin）// 別のルールセットでも呼び出し.pickupArea {@include boxSet;}

C SS（コンパイル後）.relatedArea {padding: 15px;
background: #999;
color: white;}.pickupArea {padding: 15px;
background: #999;
color: white;}

ンドとの違いやミックスインの強力さが見えてきます。 引数は、ミックスイン

107

CHAPTER

4で定義した値の一部を変更する機能です。
＊

ヒント 1
例として使用しています が、 現 在 の ブ ラ ウ ザに は border-radius プ ロ
パティにベンダープレ
フィックスは不要です。

まずは、引数を使った簡単な例を見てみましょう *1。
S a ss// 引数を使ったミックスインを定義@mixin kadomaru($value) {-moz-border-radius: $value;-webkit-border-radius: $value;
border-radius: $value;}
引数を使う場合、ミックスイン名の直後に ( （) 丸括弧）を書き、括弧内に引数（変数）を書きます。

C SS（コンパイル後）

S a ss

高度な機能を覚えて Sass を使いこなそう.box {@include kadomaru(3px);
background: #eee;}.item {
border: 1px solid #999;@include kadomaru(5px 10px);}.box {-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #eee;}.item {
border: 1px solid #999;-moz-border-radius: 5px 10px;-webkit-border-radius: 5px 10px;
border-radius: 5px 10px;}

どちらも同じミックスインから呼び出していますが、.box と .item でそれぞれ値が異なっていることがわかります。 エクステンドでは同じスタイルを継承して使いましたが、ミックスインはこのように、値の一部を変えて使いまわすことができます。
@mixin kadomaru($value) {-moz-border-radius: $value;-webkit-border-radius: $value;
border-radius: $value;}.box {
引数をセット@include kadomaru(3px);
background: #eee;}.item {
border: 1px solid #999;@include kadomaru(5px 10px);}
引数をセット108.box {-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #eee;}.item {
border: 1px solid #999;-moz-border-radius: 5px 10px;-webkit-border-radius: 5px 10px;
border-radius: 5px 10px;}

引数で値を定義CHAPTER

4

4

3

ネストしているセレクタをルートに戻せる @at-root@at-root は記述した場所より親のセレクタや @media などを除

本節のサンプルコード

外し、ルートに戻すことができる機能です。

http://book2.scss.jp/
code/c4/03.html@at-root の基本的な使い方@at-root はルールセットの中で次のように記述して使います。
C SS（コンパイル後）Sa ss

高度な機能を覚えて Sass を使いこなそう.block {.element-A {width: 80%;}
@at-root .element-B {width: 100%;}}.block .element-A {width: 80%;}
.element-B {width: 100%;}.element-A は、ネストしているのでコンパイル後の CSS では、.block .eleme
nt-A となっていますが、@at-root を使った .element-B はルートから書き出されているのが確認できます。

複数のルールセットに@at-root を適用する@at-root は複数のルールセットに対しても使うことができます。

118

C SS（コンパイル後）

S a ss.block {.element-A {width: 80%;}
@at-root {.element-B {width: 100%;}.element-C {width: 50%;}}}

.block .element-A {width: 80%;}
.element-B {width: 100%;}.element-C {width: 50%;}

.element-B と .element-C がルートから書き出されました。

@at-root をメディアクエリ内で@media 内で使った場合、該当のルールセットは @media の外ではなく中に書き出されます。
C SS（コンパイル後）

S a ss.block {width: 50%;
@media (max-width: 640px) {width: 100%;@at-root {.item {
margin-bottom: 30px;}}}}.block {width: 50%;}
@media (max-width: 640px) {.block {width: 100%;}.item {
margin-bottom: 30px;}}

コンパイル後の .item は、.block が除外され @media 内に書き出されたのが確認できます。

4-3 ネストしているセレクタをルートに戻せる @at-root

使った場合

119

第5 章

現場で使える
実践 Sass テクニック
第 5 章は、実際の現場で活用できそうな Sass テクニッ
クをアレコレ詰め込みました。 比較的簡単なテクニッ
クからミックスインを使った便利なテクニック、 gulp や
PostCSS といった現在のフロントエンド開発において必要と思われる情報なども紹介しています。 実際にSassを使う上でのヒントになる情報がいっぱい詰まった
章です。

5-1

管理 / 運用・設計で使えるテクニック

158

5-2

レイアウト・パーツで使えるテクニック

179

5-3

スマホ・マルチデバイス、
ブラウザ対応で使えるテクニック

208

5-4
5-5

gulp のタスクを追加してもっと便利な環境にする

219

PostCSS で Sass をさらに便利にする

226

CHAPTER

5

5

3

本節のサンプルコード
http://book.scss.jp/
code/c5/03.html

スマホ・マルチデバイス、ブラウザ対応で使えるテクニック
スマートフォンや、タブレット端末などマルチデバイス対応で使えるテクニックや、ブラウザ対応に関するテクニックを紹介していきます。

スマホサイトでよく見る、リストの矢印をミックスインで管理する
スマートフォン向けサイトやタブレット向けのサイトの場合、右側に「＞」などの矢印を付けたデザインがよく使われます 図 7 。
そこで、この矢印をミックスインとしてあらかじめ定義しておき、いつでも呼び出せるようにします。

現場で使える実践 Sass テクニック
208

まずは、基本となるミックスインを用意します。

図7

このミックスインを、呼び出したいルールセットで スマホ向けサイトなどでよく見か@include します。
S a ss（基本となるミックスイン）@mixin linkIcon($color: #333) {&::before {content: "";position: absolute;
top: 50%;right: 15px;
width: 10px;
height: 10px;
margin-top: -7px;
border-top: 3px solid $color;border-right: 3px solid $color;transform: rotate(45deg);}}

ける矢印が付いたリンク

S a ss（ミックスインを呼び出す）

ul.linkList {margin: 20px;
li {list-style: none;
margin: 0 0 1px;a {position: relative;
display: block;
padding: 15px {right: 27px;}
background: #eee;
color: #333;
text-decoration: none;@include linkIcon();}}}C SS（コンパイル後）

ul.linkList {margin: 20px;}
ul.linkList li {list-style: none;
margin: 0 0 1px;}
ul.linkList li a {...（略）...
}
ul.linkList li a::before {content: "";position: absolute;
top: 50%;right: 15px;
width: 10px;
height: 10px;
margin-top: -7px;
border-top: 3px solid #333;
border-right: 3px solid #333;
transform: rotate(45deg);}linkIcon(#383F9A);」などと書けば簡単に矢印の色を変更することができます
図8 。

図8

引数の値を変えるだけで、矢印の色を変更することができる

5-3 スマホ・マルチデバイス、ブラウザ対応で使えるテクニック

このミックスインでは引数に border-color を渡しているので、「@include

209

CHAPTER

5

埋め込み動画のアスペクト比計算に
percentage() を使って楽をする
Youtube などの動画をサイトに表示させるために iframe の埋め込みコードをHTML に貼り付けると思いますが、そのままではレスポンシブ Web デザインになっていないのでスマホなどに対応していません。そのため、スマホなどで閲覧した際に、動画部分だけはみ出してしまうことがあります。
この問題を解決するために、埋め込み用の iframe を div で囲って、CSS でレスポンシブ対応を行います。

HTML と CSS は、次のような感じになります。

HT M L<div class="movie">（略）..."<iframe width="640" height="360" src="https://...
frameborder="0" allowfullscreen></iframe></div>

現場で使える実践 Sass テクニック

C SS@media all and (max-width: 768px) {.movie {position: relative;
padding-top: 56.25%;}.movie > iframe {position: absolute;
top: 0;
left: 0;width: 100% !important;height: 100% !important;}}iframe に対して、「width: 100% !important;」を指定すれば、最低限レスポ
ンシブ対応が可能ですが、高さが変わらないので、動画の上下に黒い背景の余白が出てしまったりして見栄えが悪くなってしまいます。そこで上記のようなCSS を適用することで高さも可変するようにしています。

210

細 か い CSS の 解 説 は 省 き ま す が、 こ の 中 で も ポ イ ン ト に な っ て く る のが、.movie に指定している「padding-top: 56.25%;」です。この「56.25%」というのが、16:9 のアスペクト比をパーセンテージにした場合の値になります。
埋め込みたい動画のアスペクト比が常に 16:9 なら 56.25% を指定しておけば問題ありませんが、アスペクト比の異なる動画を埋め込みたい場合に、毎回計算し直すのは面倒です。
そこで、この計算を Sass の percentage() 関数を使って簡単に行う方法を紹介します。

S a ss

使い回しが楽にできるようにミックスインで定義しています。
ポイントになってくるのは「percentage($height / $width)」の部分で、このように書くだけで簡単にパーセンテージにしてくれます。
そして、先ほど用意したミックスインを使うには次のように書きます。

S a ss@media all and (max-width: 768px) {.movie {@include rwd-iframe(640, 360);}}
埋め込みたい動画のアスペクト比が異なる場合は「640, 360」の部分を変更すれば OK です。
これでアスペクト比の異なる動画の埋め込みが簡単に行えるようになりました。

5-3 スマホ・マルチデバイス、ブラウザ対応で使えるテクニック// Responsive Movie@mixin rwd-iframe($width: 16, $height: 9) {position: relative;
padding-top: percentage($height / $width);>iframe {position: absolute;
top: 0;
left: 0;width: 100% !important;height: 100% !important;
}
}

211

gulp のタスクを追加して

5

4

本節のサンプルコード
http://book2.scss.jp/
code/c5/04.html

ヒント＊ 26
ダウンロード URL

http://book2.scss.jp/dl/c5/

ヒント＊ 27
カレントディレクトリの移動や npm install などについては第 2 章を参照してください

第2章でgulpを使ったSassをコンパイルする環境を作成しました。
ここでは、gulp のタスクを追加して環境をもっと便利にしてみま
しょう。
まずは、第 5 章のサンプルファイル *26 をコピーしてください。第 2 章で gulpの設定を行っている場合は、第 2 章のデータをそのまま使っても OK です。
第 5 章のサンプルファイルを使う場合は、下記コマンドでパッケージをインストールしましょう *27。

npm install

P.33

glob でパーシャルファイルを一括で読み込む

昨今の CSS コンポーネント設計では、コンポーネントごとにファイルを細分化する手法も多く用いられます。その際に、コンポーネントが増えるごとに、パー
シャルファイルを @import で指定するのは面倒です。

S a ss@import "components/headings";@import "components/texts";@import "components/lists";@import "components/buttons";@import "components/images";

5-4 gulp のタスクを追加してもっと便利な環境にする

詳しくはもっと便利な環境にする

219

CHAPTER

5

ヒント＊ 28
gulp-sass-glob h t t p s : / / w w w. n p m j s .
com/package/gulpsass-glob

npm から「gulp-sass-glob*28」パッケージをインストールしましょう。
npm install --save-dev gulp-sass-glob
パッケージをインストールしたら、gulpfile.js に読み込みの設定と sassGlob
を sass の前に追記します。
g u l p f i le . j s

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob'); //①「gulp-sassglob」を読み込み
gulp.task('sass', function() {return gulp.src('./sass/**/*.scss').pipe(sassGlob()) // ②「sass」の前に指定.pipe(sass({outputStyle: 'expanded'})).pipe(gulp.dest());});

現場で使える実践 Sass テクニック

ヒント＊ 29ÌCtrlÔ+ÌCÔ で停止し、再度コ
マンドを実行しましょう。

これで設定は完了です。gulp を起動していない場合は、起動し直しましょう *29。

glob を使えば、下記のように「**」と指定できます。
S a ss@import "components/**";
これだけで「components」ディレクトリの全ファイルがインポートされます。
コンポーネントファイルが増えることがあっても、いちいちファイル名を指定しないでインポートすることが可能です。

glob はファイル名が数字・アルファベット順にインポートされます。もしもコンポーネント間に依存関係があると、コンパイルエラーや、レイアウト崩れの可能性があります。依存関係がないコンポーネント設計をしましょう。

220

CHAPTER

5

5

5

本節のサンプルコード
http://book2.scss.jp/
code/c5/05.html

PostCSS で
Sass をさらに便利にする
PostCSS で Sass にはできない機能を拡張し、より便利に Sassを書けるようにしてみましょう。

PostCSS とは
PostCSS は、Node.js 製 の
CSS の 変 換 ツ ー ル で す 図 17 。
プラグインを組み合わせること
でさまざまな処理を行うことがで き ま す。CSS だ け で は な く

Sass にも使うことができるの現場で使える実践 Sass テクニック

で、Sass の機能拡張に使ってみましょう。
図 17

PostCSS 公式サイト(http://postcss.org/)

図 18

PostCSS.parts(https://www.postcss.parts/)

PostCSS プラグイン
PostCSS の標準機能は解析と API の提供のみなので、CSSの処理にはプラグインが必要です。PostCSS のプラグインは、

PostCSS.parts と い う プ ラ グ
イン検索サイトが用意されているので、キーワード検索やカテゴリー検索で目的のプラグイン
が 探 せ ま す。 現 在 200 以 上 のプラグインが登録されています
図 18 。

226

PostCSS のユースケース
PostCSS は Sass にも使えますが、Sass を CSS にコンパイルすることはできません。あくまで、Sass を処理し Sass を書き出します。ファイルの変換は行いません。なのでSassと併用する場合は、以下のパターンでの使用となります。

• Sass を処理
ヒント＊ 34SCSS の 処 理 に は PostCSS SCSS Syntax プラ

グインが必要です。

SCSS フ ァ イ ル を SCSS フ ァ イ ル に 処 理 し ま す *34 図 19 。 そ の 後、Sass で
CSS にコンパイルします。PostCSS 独自のプロパティなど、Sass でコンパイルできない場合に事前に処理を行います。

SCSS

SCSS
図 19

CSS

SCSS

SCSS

SCSSをPostCSS でコンパイル、その後 Sass で CSS に処理
SCSS

CSS

SCSS

SCSS

SCSS

• コンパイルした
CSS を処理
SCSS

CSS

CSS

SCSS

CSS

CSS 図 20 。ポストプロセッサと呼ばれCSS
でコンパイルした CSS を処理します
SassSCSS
SCSS

SCSS

ていた方法です。
SCSS

SCSS

SCSS
SCSS
図 20

CSS

SCSS

CSS

CSS

CSS

CSS

SCSS
SCSS
SCSS
で CSS にコンパイルしてからCSSをPostCSS
Sass
SCSS
CSS で処理

CSS

CSS
CSS

SCSS
CSS

• サンドイッチで処理
図CSS
21 。
のコンパイルの前後で処理を行います
Sass
SCSS
SCSS

SCSS
SCSS

SCSS
図 21

SCSS
SCSS

SCSS

CSS

SCSS

SCSS

CSS

CSS

SCSS

5-5 PostCSS で Sass をさらに便利にする

SCSS

SCSS

PostCSS で SCSSを処理、Sass で CSS にコンパイル、さらに CSSをPostCSS で処理

227

CHAPTER

これら組み合わせの指定は、一見複雑そうに見えますが、gulp で簡単に順番を指定できます。
また、組み合わせ次第で複雑に処理を行いますが、PostCSS のコンパイルは非常に高速なので Sass のコンパイルと体感にあまり差は感じません。

5

PostCSS のインストール
ヒント＊ 35
gulp-postcss - https://w w w. n p m j s . c o m /package/gulp-postcss

まずは PostCSS を使う準備として、npm から「gulp-postcss*35」パッケージをインストールしておきましょう。

npm install --save-dev gulp-postcss
パッケージをインストールしたら、gulpfile.js に読み込みの設定をしましょう。

g u l p f i le . j s

現場で使える実践 Sass テクニック

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');var plumber = require('gulp-plumber');var notify = require("gulp-notify");
var postcss = require('gulp-postcss'); // ①「gulppostcss」を読み込み

gulp-postcss をインストールすれば、前説で紹介した gulp プラグインと同じように PostCSS を設定することができます。

.pipe で postcss を指定し、その引数の中で PostCSS のプラグインを指定していきます。

g u l p f i le . j s.pipe(postcss([autoprefixer()]))
このように postcss の 引数で autoprefixer を指定しているのがわかります。
では、PostCSS プラグインを追加してみましょう。前節の gulp タスクに追加
していきます。

228

第6 章

もっとSass を便利にするフレームワークやツール
第6章では、Sassをもっと使いこなすためのフレームワー
クやコンパイラなどの情報を紹介します。ひと通りSassが使いこなせるようになって、その魅力や面白さに引き込まれた方は、ぜひ本章を参考にしてより一層充実した Sass ライフをお楽しみください。

6-1

Sass のフレームワーク紹介

244

6-2

Sass の GUI コンパイラ249

CHAPTER

6

6

1

Sass のフレームワーク紹介
さまざまなフレームワークがあるのも Sass の魅力の 1 つです。本
節では、ひとまとめにフレームワークといっても用途はさまざまなので、総合・機能拡張・パーツ・レイアウトと分けて紹介します。

総合フレームワーク
ヒント＊ 1
本書公式サポートサイト
で紹介しているサイトのリンクを掲載しています。

グリッドシステムにレスポンシブ対応、フォームやボタンなどの各パーツ、アイコンや JavaScript のカルーセルなど、サイトで使うものがほぼすべて用意されているフレームワークです *1。

http://book2.scss.jp/
link/

もっと Sass を便利にするフレームワークやツール
244

Bootstrap
http://getbootstrap.com/

最も人気のある Web アプリケーションフレー
ムワーク。元々は LESS で作られていましたが、現在は Sass に移行しています。HTML にクラスを付けるだけで簡単にレイアウトすることができます。Bootstrap をベースにしたテンプレー
トも多数配布されており、拡張性も高いです。