著者プロフィール

森田 壮（もりた・そう）平澤 隆（ひらさわ・たかし）

ゲーム・マンガが好きで、絵描きの夢を追って上京。東京
ゲームデザイナー学院を卒業後、Web 関係の会社、デジパ株式会社のフロントエンドエンジニア、フリーランスとしての活動を経て、2013 年 1 月に株式会社ラテールを設立。
Web サイト制作全般およびコワーキングスペース（CSSSpace）運営を行っている。趣味は、ボルダリングとスノーボード。犬も好きだけど、ねこ派。

ソウラボの屋号で活動するフリーランス Web デザイナー。
アパレル会社の EC 担当から Web 制作の世界へ。その後、デジタルハリウッドを卒業し、制作会社でデザイナー、ディ
レクターを経てフリーランスへ。企画からデザイン、コー
ディング、構築までサイト制作全般を担当。制作の他にも、講師業や株式会社フィフティフォレストで EC 業務など。
趣味はマンガとラーメン。猫も好きだけど、いぬ派。

●株式会社ラテール http://latele.co.jp/●ブログ http://css-happylife.com/●ねこブログ http://nekonekocube.com/● Sou-Lab http://sou-lab.com/●ブログ http://blog.sou-lab.com/●いぬブログ http://bebe-log.com/

謝辞
本書の執筆をするにあたって、翻訳などのサポートを引き受けてくれた宮内 耕治さん、レビューを引き受けてくれた三宅 葉子（Latele）さん、酒井 優（WEBCRE8.jp）さん、松田 清香さんに心より感謝いたします。
また、インプレスジャパンの柳沼さんには、本書の企画をいただいてから、わがままの多かった著者の意見も聞き入れていただき、最後までお付き合いいただきました。
本当にありがとうございました。

筆者による公式サポートサイト
書籍の内容に関するサポートや、書籍内で掲載されているソースコードの一覧などが提供されています。

URL

http://book.scss.jp/

Apple、Mac、Macintosh は、米国 Apple Inc. の登録商標です。
Microsoft、Windows は、米国 Microsoft Corporation の登録商標です。
そのほか、本文中の製品名およびサービス名は、一般に各開発メーカーおよびサービス提供元の商標または登録商標です。なお、本文中には™および ® マーク
は明記していません。

はじめに
本書は、Web サイト制作に必須の CSS（Cascading Style Sheets）を、より便利に効率的に書けるようにパワーアップさせた「Sass（サス）」に関してのアレコレを書いた、教科書的な本です。
・Sass って聞いたことはあるけど、導入が面倒そうという方
・Sass を始めてみたいと思っているが、今一歩踏み出せない方
・勉強コストとの天秤に掛けて、Sass のメリットがイマイチ見えてこない方
・周りで Sass を使い出した人がいて、焦りを感じている方・CSS を今よりも効率的に書きたいと思っている方
これらの方が Sass を導入するきっかけとなり、ひと通り Sass の機能を使いこなせるようになるのが本書の目標です。

Sass は、今まで CSS を使っていた状況なら、数ページの小規模サイトから、数千ページの複数人でコーディングをするような大規模サイトまで、あらゆるシーンでより便利に効率的に制作を進めることができます。そのため、コーディングを主業務にしている方はもちろんですが、少しでも CSS に触れたことがある方すべてに読んでいただきたいという思いがあります。
本書では、Sass にまったく触れたことがない方を主な対象としているので、Sass の機能だけでなく、Sass の概要から利用環境の整え方まで丁寧に解説しています。また、せっかく環境を整えても、その後実際に使われなければ意味がないので、より実践的な内容やフレームワークなど、Sass を使いこなすために必要な内容を網羅しています。
なお、Sass は CSS を拡張した言語なので、HTML ＋ CSS の知識が必須です。本書では、ひと通り CSS を使ったコーディングができる方を対象としており、HTML や CSS に関してはほ
とんど説明していません。その点はご留意ください。もし、CSS の知識や理解が不足していると感じられる方は、CSS をある程度勉強してから、あらためて本書を手に取っていただくと、Sass に関する理解も早くなると思います。
最初は少し面倒ですが、一度初めてしまえば Sass の魅力に取り憑かれ、今までの CSS には戻れなくなると思います。本書がきっかけで Sass の使い方を覚え、もう CSS には戻れないカラダになっていただければ、著者としてそれ以上にうれしいことはありません。

2013 年 8 月の雨の日
平澤 隆＆森田 壮

CONTENTS 目次
著者プロフィール

2

はじめに

3

第1章

Sass のキホン

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

1-2

12
14
15
17
18
20
22

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

24

Ruby の知識は必要？ 黒い画面も使わないとダメなの？
公式サイトは英語だし、日本語の情報が少ないのでは？
エディタやオーサリングツールはそのまま使えるの？
自分以外の関係者が Sass を使えないから、覚えても使えない？

24
26
27
28
29

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

30

Sass に対応しているソーシャルコーディングサービス

33

第2章
2-1

Sass の利用環境を整えよう

35

Windows 環境に Sass をインストールする

36

インストール前の準備
コマンドプロンプトを起動する
Ruby がインストール されているか確認する

コラム：コマンドプロンプトの Tips

36
37
38
39
41
42

Mac 環境にSass をインストールする

43

ターミナルを起動する
Ruby のバージョンを確認する

43
45
46
47

Ruby のインストール
Sass のインストール

2-2

12

CSS を覚え始めたワクワク感や楽しさがよみがえる Sass
Sass とは？
Sass だけどSCSS ？ sass ファイルとscss ファイルの違い
scss ファイルではブラウザは認識できない
魅力的な Sass の機能
Sass はなぜ誕生したのか
さまざまな CSS メタ言語と Sass

運用時に Sass を使うのは難しいから、Sass は導入できない？

1-3

11

Sass のインストール
コラム：ターミナルの Tips

2-3

Sass を最新版にアップデートしよう

48

gem をアップデートする
Sass をアップデートするバージョンを指定してインストールする

48
49
49
50
50

Sass コマンドの使い方を覚えよう

51

何はともあれコンパイルしてみよう「.sass-cache」フォルダについて
その他のコマンドやオプション

51
54
55
58
61
65
66

バッチファイル／シェルスクリプトで
簡単にコマンドを実行する

68

アルファ版を先行してインストールしてみる
アンインストールする／バージョンを戻す

2-4

コラム：日本語名フォルダについて
現在地（カレントディレクトリ）に移動する
アウトプットスタイルを指定する（Style オプション）
ファイルの更新を監視する（Watch オプション）

2-5

ダブルクリックで実行できるようにする

2-6

2-7

Windows 用のバッチファイルを作成する
Mac 用のシェルスクリプトを作成する

68
69
70

GUI（Koala）で Sass を使用する

73

Koala の環境設定
プロジェクトファイルを用意する
ファイルごとの設定
プロジェクト設定
コンパイルする
エラーメッセージ
コラム：GUI コンパイラのデメリット

74
76
78
78
80
81
82

インストールや実行中にエラーが表示された場合の対処法

83

Windows で Ruby をインストールしたのに ruby コマンドが実行できない
Mac で Sass のインストールができない
Mac でパスワードを入力しても先に進まない
Watch ができない
アップデートができない（Windows）
Watch しようとすると警告が出る
Koala が起動できない（Windows）
Koala がコンパイルできない（Windows）

83
84
84
84
85
85
86
86

第3章

3-1

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

87

ルールのネスト（ Nested Rules ）88

ネストの基本88
90
91

子孫セレクタ以外のセレクタを使うには@media のネスト

3-2

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

92

3-3

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

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

95

Sassで使えるコメント96

1 行コメント
通常のコメント96
96

変数（ Variables）

98

変数の基本

変数を参照できる場所

98
99
100
100
101
103

演算

105

演算の基本
変数と演算を同時に利用する
色の演算
各演算子の注意点や条件など

105
107
107
109

Sass の @import111@import の概要
CSS ファイルを生成しない、パーシャル

111
113
114
114

3-4

3-5

コラム：バージョンによる記号の違い
変数名で使える文字と使えない文字
ルールセット内で変数を宣言する
変数の参照範囲（スコープ）

3-6

3-7

インポートファイルの複数指定@import のネスト

第4章

4-1

4-2

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

117

スタイルの継承ができる @extend

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

118
121
122
122
124
125
127

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

ミックスインの基本引数を使ったミックスイン
引数に初期値を定義する
引数を複数指定する

128
129
131
132
133
135
136

,（カンマ）を使うプロパティには可変長引数を利用する
複数の引数があるミックスインを読み込む際に可変長引数を使う
ミックスインのスコープ（利用できる範囲）を制限するミックスインにコンテントブロックを渡す @content

4-3

4-4

ミックスイン名で使える文字と使えない文字

137
139

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

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

140
143
145
146

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

148

関数とは？
数値の絶対値を取得する abs()

リストの N 番目の値を取得できる nth()

148
149
149
150
151
152
153
154

自作関数を定義する @function

155@function とはネイティブ関数と組み合わせる
値を変数に入れる
引数に初期値を設定する

155
156
156
157
157

テストやデバックで使える @debug と @warn

158@debug で結果を確認する@warn で警告を表示する

158
159

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

161

データタイプの種類
データタイプを判別する

161
163

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

インターポレーションとは演算しないようにする
演算できない場所で演算する
アンクォートもしてくれるインターポレーション

165
166
166
167

変数にデフォルト値を割り当てる !default

168!default フラグとは!default を使う場面

168
169

数値の小数点以下を四捨五入する round()
数値の小数点以下を切り上げる ceil() と数値の小数点以下を切り捨てる floor()

16 進数の RGB 値に透明度を指定して、RGBA 形式に変換できる rgba()
明るい色を簡単に作れる lighten() と暗い色を簡単に作れる darken()
2 つのカラーコードの中間色を作れる mix()

4-5

オリジナル関数の例

4-6

4-7

4-8

4-9

第5章
5-1

現場で使える実践 Sassコーディング 171

管理 / 運用・設計で使えるコーディング Tips

172

ネストが深すぎると生じる問題を把握して、バランスを見ながら利用する172コラム：ネストは何階層までがよいか

Sass はオブジェクト指向設計と相性がいい

174
175
178
179
180
181
182
184
185
186

ブラウザ対応で使えるコーディング Tips

192

Sass の意外な罠 !? セレクタが 4,095 個を超えると IE9 以下で認識されない
Sass で使える CSS ハックと使えない CSS ハック@each を使ってベンダープレフィックスを自動で付与する

IE の対応をしつつ「rem」を使ってフォントサイズを指定する
ブラウザのインスペクタで Sass ファイルの位置（行数）を知る

192
194
196
199
200
203
205

レイアウト・パーツで使えるコーディング Tips

210

clearfix を @extend で活用する@function を使って px 指定する感覚でフォントサイズを % 指定する変数を使って YUI の CSS Fonts を管理する

文字リンクカラーのミックスインを作る
複数の値を @each でループし、ページによって背景を変更する
シンプルなグラデーションのミックスインを作る

210
212
213
214
216
218
220
222
223
224
225
231
233
235

スマホ・マルチデバイスで使えるコーディング Tips

237

スマホサイトでよく見る、リストの矢印をミックスインで管理する
Retina ディスプレイなど、高解像度端末の対応を楽にする
レスポンシブ Web デザイン対応で楽をするため、@content を活用する

237
239
241

CSS とは違うパーシャルによる Sass ファイルの分割
さまざまなリセット CSS を 1 つのファイルにまとめて使いまわす
コラム： リセット CSS などの Sass 版
複数のリセット CSS をパーシャルファイルにして使いまわす
複数人で制作する場合は、各自の Sass ファイルを用意する
CSS で制作したサイトを Sass に切り替える
コメントを活用してソースをわかりやすくする
つねに同じ場所からモジュール用の Sass ファイルをインポートする

5-2

コラム：ベンダープレフィックスは必要か？
面倒な CSS3 のアニメーション指定を簡単にする

5-3

変数を使って、サイドバーの幅を自動的に計算する

null で簡単に条件分岐をしてレイアウトをする
calc を使って全体の横幅からボーダーの横幅を簡単に計算する@for を使って余白調整用の class を生成する
リストマーカー用の連番を使った class 名を作成する
連番を使った class 名のゼロパディング（0 埋め）をする
変数と演算で opacity を使った簡易ロールオーバーを作成する
グローバルナビゲーションの CSS スプライトを作成する

5-4

第6章
6-1

Sassをさらに便利にするCompass 245

Compass を利用する準備

246

Compass って何？
Compass のインストール

246
247
248
249
252
253

プロジェクトを作成する
config.rb の設定
Compass でコンパイルしてみる
コラム：Compass を GUI コンパイラで使う

6-2

6-3

6-4

Compass のインポートとモジュール

254

Compass をインポートする
Compass のモジュールについて

254
254

Compass のミックスインを使う

256

CSS3 モジュール
Utilities モジュール
Typography モジュール

256
263
267

Compass の設定変数を定義する

270

設定変数についてレガシーブラウザの対応のオン／オフ
その他の設定変数

270
270
271
271

Compass の関数（Helpers ）272

画像関連の関数（Image Helpers）
色（Color Helpers）
セレクタで使う関数（Selector Helpers）

272
274
275

Compass で簡単 CSS スプライト（Compass Sprites）

277

マジックインポートでスプライト画像を作成する
背景の位置を書き出す

個別のセレクタにプロパティと値を渡す
コラム：Oily PNG のインストール

277
279
281
285
288
289

高度な CSS スプライトの使用方法（Sprite Helpers）

290

スプライト関数（Sprite Helpers）
関数を組み合わせて使う

290
293
294
296

ベンダープレフィックスのオン／オフ

6-5

6-6

Sprites の設定変数
マジックセレクタで擬似クラスを作成する

6-7

sprite-map() 関数で使えるミックスイン
コラム：Compass をさらに拡張する Compass Recipes

第7章

7-1

もっとSassを使いこなして便利にしようSass のフレームワーク紹介

298

機能拡張系

レイアウト系

298
299
301
302

Sass が使えるテキストエディタ

304

Windows/Mac 両対応
Windows 専用
Mac 専用

305
306
307

総合フレームワーク
パーツ系

7-2

297

7-3

7-4

7-5

Dreamweaver の Sass の対応

308

Dreamweaver CC の Sass 対応について
CS6 以下で Sass ファイルを Dreamweaver で開けるようにする

308
309

Sass の GUI コンパイラ

311

Windows/Mac 両対応
Mac のみ 対応311
314

Sass の CUI ツール

315

第8章
8-1

Sass 全機能リファレンス

Sass の基本と高度な機能

318

CSS の拡張機能（CSS Extensions）
Sass のコメント
Sass スクリプト@ ルールとディレクティブ
ミックスイン

318
319
319
322
323
324

Sass の関数一覧

325

RGB 形式の色を操作する関数
HSL 形式の色を操作する関数

条件に応じて出力値を変える関数

325
326
329
330
331
331
333
334
335

Sass の拡張

336

自作関数を Ruby で定義する
インポートをカスタム

336
336
336

付録：コマンドオプション一覧

338

付録：用語集

340

索引

346

制御構文

8-2

透明度を操作する関数
その他の色を調整する関数
文字列を操作する関数
数値を操作する関数
リストを操作する関数
内部的な値を確認する関数

8-3

317

キャッシュの保存場所

第1 章

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

1-1

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

12

1-2

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

24

1-3

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

30

CHAPTER

1

1

1

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

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

Sass のキホンしませんでした。
それは、主に次のような理由からでした。

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

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

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

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

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

13

CHAPTER

1

Sass とは？
Sass は魅力的と書きましたが、そもそも Sass って何？と思われるかもしれ＊ヒント 1
CSS を拡張したメタ言語
を CSS メタ言語と表記して い ま す。 ま た、「CSS
プリプロセッサ」と「CSS
メタ言語」は同様の意味になります。

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

パワ
アッ ー
プ

Sass のキホン

CSS

Sass

Sass は「Syntactically Awesome Stylesheets」の略で、日本語に訳すと「構文的にイケてるスタイルシート」という意味になります。 構文的にイケてるとい
われても、CSS ってそんなにイケてないの？といった疑問を持つ方もいると思います。CSS は広く普及させる目的もあって、書式自体は非常にシンプルになっており、プロパティなどを 1 つ 1 つ覚えていけば誰にでも習得できるようになっています。 しかし、それゆえに複雑なことができないという側面もあり、コードの 再 利 用 や、 変 数、 演 算、 条
件分岐などのプログラムでは当たり前のように使える機能

14

図1

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

がありませんでした。その CSS の弱点を補う目的で誕生したのが Sass なのです 図1 。

Sass の詳しい歴史に関しては追って触れていきますが、現在主流となっている Sass は CSS と互換性があるので、今までの CSS ＋αとして使える設計になっています。 そのおかげで、初めて Sass を使っても今までの CSS と変わらない感覚で使うことができるので、無理にすべてを覚えようとせずに、必要な機能を使うだけでも十分に Sass の恩恵を受けることができます。

Sass だけど SCSS ？
sass ファイルと scss ファイルの違い「構文的にイケてるスタイルシート」ということは、既存の CSS とは構文が異なっているため、
CSS ファイルには Sass を記述できないということになります。
そのため、CSS では拡張子が「css」のファイルになりますが、Sass の場合「scss」という専用の拡張子のファイルに記述していくことになります。

Sassソース$width: 260px;

C SS/* * /

Sass は、CSS と互換性があるため、CSS ファイルの拡張子を「scss」に変更
するだけでも立派な Sass ファイルになります（Sass の機能を使わないとあまり意味はありませんが……）。
この拡張子ですが、Sass なら拡張子も「sass」のほうがわかりやすいのに

1-1 まずは Sass って何なのかを知ろう#side {
float: right;
width: $width;nav {
margin: 0 0 20px;}}

CSS ファイルには、Sass を書くことはできない「scss」という拡張子になっています。実は Sass には記法が 2 つあり、最初に作られたのが SASS 記法で拡張子は「sass」、後から作られたのが SCSS 記法で拡張子は「scss」となっています。 この 2 つの記法には大きな違いがあり、最初に作られた SASS 記法は、セレクタの後の { 〜 （} 波括弧）の代わりにインデントで書き、値の後の （; セミコロン）は省略できるといった、非常に簡素化された記法

15

CHAPTERでした。その反面、通常の CSS とは互換性がなく書式も異なっていたため、それがネックとなって広く普及するには至りませんでした。そこで、CSS との互換性を高めた SCSS 記法が作られました。
ちなみに、SCSS は「Sassy CSS」の略で、翻訳すると「カッコいい CSS」や「イ1カした CSS」という意味になります。

2 つの記法の違い
C SS

ul {

margin: 0 0 1em;}
ul li {
margin-bottom: 5px;}
この CSS を、SCSS 記法と SASS 記法で書いた場合、次のようになります。
SCSS 記法の S a ss

S A SS 記法の S a ss

ul {

ul

Sass のキホン}

margin: 0 0 1em;li {margin-bottom: 5px;}

margin: 0 0 1em
li
margin-bottom: 5px

SASS 記法では、記述量が減って簡素化していることがわかります。しかし、SASS 記法は CSS と互換性がなく、インデントの深さや改行の位置など、細かい書式が決まっており、CSS の書式で書くとエラーになってしまいます。
ヒント＊ 2ネ ス ト に 関 し て は、 第3 章 の「 ル ー ル の ネ ス ト（Nested Rules）」で詳しく説明しています。
詳しくは

16

P.88

SCSS 記法では、ネスト *2 という機能を使って書いているので、書式が異なっていますが、CSS と互換性があるため、CSS と同じ書式で書いても問題ありません。現在、Sass を指す場合は SCSS 記法が一般的になっており、Sass の公式サイト（http://sass-lang.com/）でも SCSS 記法のサンプルがデフォルト表示になっているため、本書でも特に言及がない限り、SCSS 記法で説明しています。

scss ファイルでは

ブラウザは認識できない
Sass には、SCSS 記法と SASS 記法の 2 つの記法があるという説明をしまし
たが、CSS とは拡張子が違うため、そのままではブラウザが認識できません。
ヒント＊ 3

そのため、Sass ファイルを CSS ファイルにコンパイル *3 する必要があります。

コンパイルとは「変換」のこ と で、 本 書 で は Sass
を CSS に変換することをコンパイルといっています。また「ビルド」と表記されている場合も同じ意
味になります。

S a ss

CSSに
コンパイル

直接
読み込めない

コンパイル

CSS

HTML

CSSを読み込み

Ruby のインストールは、Windows のみ必要です。

コンパイルをするには、Ruby*4 と Sass をインストールする必要があります。

Ruby に関してはインストールするだけで、Ruby の知識が必要になることはありません。
ソフトウェアをインストールするだけなら、通常はサイトなどからファイルを

ヒント＊ 5
CUI（ Character User
Interface）は、 テ キ ス ト

ベースでキーボードからコマンドで操作を行います。コマンドプロンプト
やターミナルなどのことです。

ヒント＊ 6
GUI（ Graphical User
Interface）は、 表 示 に グ

ラフィックを多用しマウ
スでの操作が可能なため、操作性に優れ視認性もいいことから、主流となっているユーザーインター
フェースです。

手に入れれば、後はインストーラーがやってくれるのでインストールは容易です
が、Sass に関しては CUI*5 を使って行う必要があります。

Sass の導入にあたってハードルが高く感じてしまう要因の 1 つが Sass のインストール作業だと思いますので、インストールに関しては、第 2 章「Sass の利用
環境を整えよう」（P.35）で詳しく説明しています。
また、現在ではコマンドプロンプトやターミナルを一切使わなくとも Sass が利用できる、さまざまな GUI*6 ツールがあるので、気軽に導入することが可能となっています。GUI ツールのインストールや使い方に関しても第 2 章の「GUI1-1 まずは Sass って何なのかを知ろう

ヒント＊ 4（Koala）で Sass を使用する」（P.73）で説明しています。

17

CHAPTER

魅力的な Sass の機能

1

Sass は、CSS をより便利に効率的にするためのさまざまな機能があります。その分学習コストはか
かりますが、一度覚えてしまえばコスト以上のメリットが得られます。 ここでは、Sass によってどんなことができるようになるかを軽く紹介します。

承
1 行コ

タの継

セレク

ミックスイン

演算
メント

パーシャル
ト
数
ネス
変
制
関数
御
構
文
圧縮
の
ル
フレーム
イ
ワーク
ファ

Sass
ヒント＊ 7
第 3 章 の「 ル ー ル の ネ ス
ト（Nested Rules）」
詳しくは

P.88

Sass のキホン

ヒント＊ 8
第 3 章の「Sass で使える
コメント」
詳しくは

P.96

ヒント＊ 9
第 3 章の「変数（Variables）
」
詳しくは

P.98

ヒント＊ 10
第 3 章の「演算」
詳しくは

P.105

記述の簡略化ができる親子関係にあるセレクタを入れ子（ネスト）にして書くことができます。CSS
では、親の要素から対象要素までのセレクタを何度も書く必要がありますが、Sass はネストさせることで、同じ親のセレクタをまとめることができます *7。

専用のコメントが使える
Sass では、CSS のコメント（/* 〜 */）の他にも、JavaScript などでなじみがある、1 行コメント（// 〜）を使うことができます *8。

同じ値を使いまわすことができる
CSS では、例えば複数の要素に同じ色を適用させる場合、何度も同じスタイルを書かなければなりませんが、Sass では「変数」を使うことによって、同じ値を使いまわせます *9。

四則演算が使える
あらゆる値に対して、四則演算を使うことができます。これにより、width から padding の値を引いたり、画像のサイズを半分に割って Retina ディスプレイ
などの高解像度端末に対応させたりといった使い方ができます *10。

18

ヒント＊ 11
第 4 章の「スタイルの継承ができる @extend」
詳しくは

P.118

ヒント＊ 12一度使ったセレクタを使いまわせる@extend という機能を使えば、一度使ったセレクタのスタイルを、別のセレク
タでも使うことができます。同じスタイルを何度も書く手間から開放され、コンパイル後の CSS はグループ化されるので、非常に合理的なソースになります *11。

コードの再利用が可能
スタイルをまとめてテンプレートやモジュールのように定義し、それらを簡単

第 4 章の「柔軟なスタイルの定義が可能なミックス
イン（@mixin）」に読み込んで使うことができます。また、引数を指定することで部分的に値を変詳しくはえるといった、複雑な処理をすることも可能となっています。この機能は、ミッP.128

クスインと呼ばれており、Sass の中でも最も強力な機能の 1 つです *12。

ヒント＊ 13
第 3 章の「CSS ファイルを生成しない、パーシャル」
詳しくは

P.113

第 4 章の「制御構文で条件分岐や繰り返し処理を行
う」
詳しくは

P.140

ヒント＊ 15「パーシャル」という機能を使うことで、複数の Sass ファイルをコンパイル時に 1 つの CSS ファイルとしてまとめることが可能です。これにより、HTTP リ
クエストを減らしつつ、Sass ファイルを分割して管理しやすくできます *13。

条件分岐などのプログラム的な処理ができる
条件分岐や繰り返し処理などの制御構文が使えます。各制御構文を使うことで、複雑な処理が可能になり、ミックスインなどと組み合わせることで、非常に強力な機能になります *14。

CSS ファイルを圧縮できる
Sass は、CSS ファイルにコンパイルする際に、圧縮された状態にすることがで

第 2 章の「アウトプットス
タイルを指定する（Style
オプション）」

きます。これにより、Sass を使っているときは可読性を重視してコメントなどを詳しくはしっかり使い、コンパイルされた CSS は圧縮して軽量化することが可能です *15。

P.58

ヒント＊ 16
第 6 章 の「Sass を さ ら に便利にする Compass」
詳しくは

P.245

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

ヒント＊ 14

1 つの CSS ファイルにまとめることができる

便利なフレームワークが使える
Sass では Compass（コンパス）を代表とする、さまざまなフレームワークが開発されています。これにより、Sass をさらに便利に使うことができます *16。

19

CHAPTER

1

Sass はなぜ誕生したのか
Sass の概要や魅力について説明してきましたが、Sass はどういった経緯で誕生したのか、そんな歴史的なことにも少し触れておきたいと思います。特に知らないと困るようなことではないので、退屈だったら読み飛ばしていただいて構いません。
本章の「Sass とは？」でも軽く触れましたが、CSS は広く普及させる目的などから、できる限りシンプルな書式で、多くの人にとってわかりやすい仕様になっています。 もちろん、CSS でもセレクタやプロパティ、ブラウザの対応などを覚えなくてはいけないので、習得が容易だとはいえませんが、書式だけを見ればセレクタ（p や #main など）から始まり、波括弧（}）で終わるルールセットを繰り返し書いていくだけのシンプルなものでした。これは、CSS のメリットでもありますが、同時に複雑なことはできないというデメリットも併せ持っています。

CSS はシンプル !!
……だけど、難しいことはできない

Sass のキホン

Sass
CSS
セレクタ {
プロパティ : 値}

コードの再利用
ネスト
変数
制御構文……etc.

Sass の誕生
特にここ数年で、マルチデバイスの対応や、Retina ディスプレイなどの高解像度ディスプレイへの対応、CSS3、レスポンシブ Web デザインなど、CSS に求められる要件も上がっています。そういった中で、CSS の仕様にさまざまな機能が追加されるのを待っていても、それからブラウザへの実装が進んで実用レベルに達するには相当な年月がかかってしまいます。

Sass の開発者であるハンプトン・カトリン（Hampton Catlin）氏とネイサン・
ワイゼンバウム（Nathan Weizenbaum）氏は、CSS の仕様策定やブラウザの実装を待つのではなく、サーバーやローカル環境で動作するプログラムによって、既存の CSS の仕様に合うように変換すればいいことに気付き、Sass の開発に着20

ヒント＊ 17
Haml（ハムル）は HTML/XHTML を 生 成 す る た めの マ ー ク ア ッ プ 言 語 で、インデントや簡略構文に
よって簡潔な記述が行えます。

手しました。 そして、最初に開発した Sass（SASS 記法）が 2006 年に公開されました。 公開当初、Sass は Haml*17 とセットで誕生したため、インデントを使って CSS をシンプルに書けるのが特徴でした。

SCSS 記法の誕生
しかし、いくら CSS がパワーアップしたといっても、既存の CSS の書き方とは大きく異なっており、CSS との互換性もなかったため、Web デザイナーやプログラムに触れない人たちにとっては非常にハードルが高い存在でした。 そこで、Sass 3.0 より、CSS の記法と似ている Sassy CSS（SCSS）が導入されました。これにより CSS と完全互換となり、既存の環境からも Sass の導入が簡単になったことで利用者が増え、Sass の主流は SCSS 記法になりました。

日本では、Sass の誕生時点では Ruby ユーザーが Haml と一緒に使う程度で、あまり Web 業界の人たちに知られている言語ではありませんでした。 しかし、SCSS 記法の誕生により、2010 年の秋ごろから「Sass は素晴らしいよ！」という声を聞くようになりました。当時はまだまだ日本語の情報は少なかったのです
が、Sass の利便性に感動したクリエイターたちのブログや SNS、口コミにより、
徐々にユーザーを増やしていきました。メジャーなブログや動画解説サイトでも取り上げられるようになり、Sass の話題を見かける機会がとても増えました。

2012 年 5 月には、Sass では国内初となる電子書籍も発売され、Sass を導入している人はさらに増えたと思います。
そして、昨今では、Sass を取り扱ったセミナーなども開催されて多くの

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

国内での Sass

人が集まるようになり、注目度は非常に高まっているといっていいでしょう。 開発環境側でも動きがあり、オーサリングツールの代表である「Adobe

Dreamweaver CC」が Sass と LESS（レス）に対応しました。 こういった動き
からも、今後の Web サイト制作において、Sass を代表とするメタ言語の習得が必須となりうるレベルになってきています。

21

CHAPTER

さまざまな CSS メタ言語と Sass

1

Sass は CSS を拡張したメタ言語という話をしましたが、このメタ言語はSass 以外にもたくさんあります。 Sass をご存じの方なら名前を聞いたことがあるかもしれませんが、Sass と同じくらい有名な「LESS」や、SASS 記法に近い「Stylus（スタイラス）」が代表的な CSS のメタ言語です。

LESS「LESS」は、Bootstrap で採用されていたため、Sassと同じくらい有名な CSS メタ言語で す 図 2 。Sass との比較記事も多く見かけます。書き方は Sass と似ており、機能としては Sass より少ないですが、JavaScript で実装しているため、Ruby のインストールなどの作業が必要なく、コンパイルも JavaScript を読み込むことでクライ
アントサイドでの動的な CSS の生成ができるなどの特徴があります。 JavaScript ベースだったり気軽に使いやす

Sass のキホン

かったりという点で使っている方が多いように見受けら
図2

LESS http://lesscss.org/

れます。

Stylus「Stylus」は、Sass や LESS よ り も 後 発 の CSS メ タ
言語で、Sass の最初の記法である SASS 記法に似ており、記述を極限まで簡素化して書くことができるのが特徴で す 図 3 。ただ、SASS 記法との大きな違いとして、

CSS の書式も使うことができます。 また、Stylus はもと
図3

Stylushttp://learnboost.github.io/stylus/

もと Node.js のモジュールの 1 つとして提供されたので、

Node.js ベースのフレームワークでも使われています。

その他の CSS メタ言語
大半の CSS メタ言語は、Sass を覚えていればある程度すんなり使えるものが多いため、気になった CSS メタ言語があれば、実際に試してみるといいでしょう。

22

図4

Roole http://roole.org/

図5

TASS http://cho45.github.io/tasscss/

図6

PCSS http://pcss.wiq.com.br/

図7

CSS Crush http://the-echoplex.net/csscrush/

ここで紹介した CSS メタ言語は、Sass よりも後発のものが多いため、単純な機能だけ見たら Sass よりも優れている部分があったり、インストールが簡単だったりしますが、本書で Sass を取り上げたのには理由があります。 第一に Sassはユーザー数が多い点が挙げられます。ユーザー数が多いということはそれだけ支持されている証拠ですし、困ったときに相談したり、Web 上を検索して解決策が見つかる可能性も高くなります。 第二に、開発が活発に進んでいます。せっかく覚えても開発が止まってしまっては先行きが怪しくなってしまいますから、勉強する上では重要なポイントでしょう。仮に開発元が開発をやめてしまっても、人気が高いものは有志の方々が引き継いでくれてプロジェクト自体が存続しやすいはずです。 他にも、優秀な GUI ツールや、Compass を代表とするフレームワー

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

それでも Sass

クの充実も Sass を選ぶ大きな理由の 1 つといえます。本書では、Compass に関しても、基本的な使い方や便利な機能に関して説明しているので、フレームワー
クの魅力にも触れていただけます（P.245）。
他にも Sass の魅力はたくさんありますが、こういった理由から Sass を選ん
でいます。

23

CHAPTER

1

Sass を導入する前の

1

2

疑問や不安

ここでは、導入のハードルが高く感じられたり、「いざ導入してもその後実務では使えないのでは？」といった、導入する前の不安や疑問などを解決していきます。

Ruby の知識は必要？

黒い画面も使わないとダメなの？

Ruby の知識は不要です！
CUI でコンパイルするには、Ruby と Sass を自身のパソコンにインストー
ヒント＊ 18
Ruby は、Mac に は も とSass のキホン

もとインストールされてい る の で、Windows のみ必要です。

ル *18 する必要がありますが、Ruby のコードを書くことはありません。Ruby は
インストーラーが用意されているので、通常のソフトウェア同様インストーラー
をダウンロードしてから、数回クリックするだけでインストールが完了します。
また、インストール後の作業も特にないので、一度インストールしてしまえば、
その後は特にすることはありません。

黒い画面も使わなくとも大丈夫です！
GUI ツールを使えば、黒い画面（Windows ではコマンドプロンプト、Mac ではターミナル）を一切使わずに、Sass を利用することも可能です。
また、GUI ツールを使わない場合は、必ず黒い画面を使う場面が出てきますが、一度環境を構築してしまえば、その後に面倒なことや難しいことはまったくありません。
黒い画面が必要となるのは、主に次の場面です。
黒い画面を使う主な場面• Sass のインストール作業• Sass のアンインストール作業• Sass のアップデート、gem のアップデート• Sass を書き始めるとき

24

当然、インストール作業は初回のみなので、以後は必要ありません。アップデー
ト作業は、そこまで頻繁にやる必要はないので、数カ月に一度行えば基本的には十分ですが、可能な限り最新版を使いたい場合は、こまめにアップデートを行いましょう。

Sass を書き始めるときは、必ず黒い画面を使う必要がありますが、Sass を書き始めるたびに黒い画面を立ち上げてコマンドを入力するのは非常に面倒な作業です。そこで、本書ではコマンドプロンプト用のバッチファイル、ターミナル
用のシェルスクリプトを用意する方法をお勧めしています。 この、バッチファ
イル／シェルスクリプトをダブルクリックするだけで、Sass を書く準備が完了するため便利です。その方法に関しては第 2 章の「バッチファイル／シェルスク
リプトで簡単にコマンドを実行する」（P.68）で説明しています。
普段から黒い画面に触れる機会はあまりないと思いますので、GUI が主流な昨今では、黒い画面には抵抗や苦手意識を感じる方も多いと思います。しかし、本書を読み進めていただければ、黒い画面に関してはほとんど覚える必要がないことがわかると思います。

黒い画面はあまり使わない！

ぐらい ...

余談ですが、プログラマやシステムエンジニアに使われていた黒い画面は、現状フロントエンドの開発環境にも必要不可欠になってきています。 Sass はもちろんのこと、Haml、Git、Node.js、Stylus、Grunt、Bower など……これらのツールは基本的に黒い画面を使います。 今後も優秀なツールはたくさん出てくると思いますが、最初は CUI でのコマンドベースの操作がほとんどです。 その後一1-2 Sass を導入する前の疑問や不安

・インストールするとき・アンインストールするとき
・アップデートするとき・Sass を書き始めるとき

定の人気を獲得すると GUI のツールが作られるパターンが多いです（Sass は優
秀な GUI ツールがすでに多数あります）。

Sass は、簡単なコマンドを覚えるだけで使えるので、これから始めるのにとても適しています。黒い画面が苦手で使用を敬遠していた方も、本書をきっかけに少しだけ黒い画面と仲良くなりましょう。

25

CHAPTER

1

公式サイトは英語だし、日本語の情報が少ないのでは？
最近では、日本語の情報もかなり増えてきています！ 確かに 2、3 年前までは、日本語の情報も少なく、まともな GUI ツールなどもほとんどなかったため、せっかく覚えようと思っても途中で挫折してしまうケースも多かったと思いますが、今では、多くのブログやサイトで Sass を含む CSS メタ言語の紹介記事がある
ので、公式サイトを見なくとも特に困ることはないでしょう。
しかし、それでも公式サイトの情報は欠かせません。 英語のドキュメントを読むのは、多少英語ができてもなかなかつらいものがありますが、現在、GitHub 上のグループで、公式サイトの翻訳も進められています 図 8 。すでにかなりの内容が翻訳されているので、公式サイトの情報に興味がある場合は、一読してみるといいでしょう。

Sass のキホン
図8

26

GitHub で、日本人の複数の翻訳者により、公式サイトの翻訳が進められている
https://github.com/enja-oss/Sassエディタやオーサリングツールはそのまま使えるの？
Sass は、CSS と同じテキストデータなので、使い慣れているテキストエディ
タや Dreamweaver などを使うことができます。ただ、何の設定もしないと認識されなかったり、シンタックスハイライトやコードヒントが表示されなくなった
りしてしまうので、多少設定を変更する必要があります。

テキストエディタ
多くのテキストエディタの場合、拡張子ごとに設定を変更できたりすると思いますので、CSS で使っていた設定をそのまま Sass で使えば基本的に問題なく使うことが可能です。

Adobe Dreamweaver
Dreamweaver の場合は、拡張子が変わってしまうと CSS ファイルとして認識されなくなります。そのため、最初に拡張子を追加するなどの作業をする必要
なお、Dreamweaver CC からは、Sass に対応したため、そのまま利用することができます。

S ass

今までの

エディタで OK

エディタ
HTML

CSS

1-2 Sass を導入する前の疑問や不安があります。

Sass で使えるテキストエディタや IDE（統合開発環境）に関しては、第 7 章の「Sass が使えるテキストエディタ」（P.304）にて紹介しています。

27

CHAPTER

運用時に Sass を使うのは難しいから、
Sass は導入できない？

1

Sass のハードルを上げている理由として、「社内で自分だけが Sass を使うことはできない」または、「フリーランスや SOHO でやっていて、Sass ファイル
ヒント＊ 19を納品するわけにいかない」といった事情が挙げられます。 確かに、社内のガイドラインが決まっている場合は、会社全体のコーディングルールから見直さなけ

書 き 出 さ れ るC S S のフォーマット（アウトプッ
ト ス タ イ ル ）は 4 種 類 あり、自由に選ぶことがで
きます。
詳しくは

ればならないケースもありますが、そこまでルールが厳しくない場合は、新規でコーディングをするときだけ Sass を使い、運用フェーズに入ってからは、Sassを使わないで従来通り CSS ファイルを編集して使うことも可能です。

P.58

Sass はコンパイルする際に、CSS ファイルのフォーマットを選ぶことができます *19。このフォーマットの 1 つに expanded というものがあり、この指定をすると、普通に書いた CSS のように書き出されます。

Sass のキホン
図9コンパイル前の Sassファイル

図 10 Sassをexpanded スタイルでコンパイルした CSSファイル

コンパイル前後のソースコード 図 9

図 10 を見比べていただくとわかるように、Sass をコンパイルしても通常のコメント（/* 〜 */）は残りますし、CSS ファ
イルの可読性も特別悪くなるということはありません。 Sass の 1 行コメント（//〜）はコンパイルすると必ず消えてしまうのでできるだけ控えるようにし、CSS

28

ファイルの分割ルールなども合わせておくなどの対応をすれば、後から別の人がメンテナンスできないという状態は避けられます。

Sass の魅力の 1 つであるメンテナンス性の向上が活用できなくなってしまい
ますが、その辺りは割り切ってしまってもいいでしょう。
また、フリーランスなどで多くの企業とかかわる場合、各社のガイドラインに従う必要がありますが、アウトプットスタイルを expanded にすれば問題ない
ケースも多いです。納品時にも、Sass で書いてる旨は特に伝えず普通に納品してしまって問題ないと思います（もちろん、クライアントに応じてケース・バイ・
ケースですが）。 また、それとは逆に、Sass や LESS などのメタ言語でのコーディングを依頼されるケースも徐々に発生するかもしれません。メタ言語の経験がないからといって断ってしまうのは非常にもったいないので、覚えておいて損をすることはないでしょう。

自分以外の関係者が Sass を使えないから、覚えても使えない？
先ほどは、CSS ファイルで運用するというやり方でしたが、納品時の CSS ファ
イルにはクライアントや更新担当の方には触らないようにしてもらい、別途、担段の更新は担当者用の CSS ファイルに記述してもらい、大き目な修正や追加などで CSS をガッツリ修正・追加する場合だけ Sass を使うようにして、場合によっては担当者用の CSS をその際にマージしてしまうことも可能です。

Sass で作業

制作者

S a ss

受け取った
CSS を使うCSS で納品

担当者

CSS

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

当者用の CSS ファイルを用意するというやり方もあります。 この方法なら、普「Sass だと関係者に使えない人がいるから自分だけ覚えても使えない……」と決め込まず、担当者や関係者間で話し合ってうまく運用ルールを決めていければ、十分に使える場面はあるでしょう。

29

CHAPTER

1

1

3

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

何はともあれSass を触ってみよう
実際に自身のパソコン上で Sass を使うにはインストールなどの作業が必要ですが、その前に軽く Web 上で Sass を触ってみて、感触をつかんでみましょう。
ここまで読んで、Sass のメリットが多少は見えてきたと思います。 次章以降
は、実際に Sass を使ってコーディングをするためにインストール作業などを説明していきますが、その前に少しだけ Sass に触れてみましょう。 ちょっと試すだけなら特別な環境は必要なく、インターネットにつながっている PC ならブラウザ上（IE は 8 以上）で簡単に試すことができます。
まずは、ブラウザを立ち上げ、アドレスバーに次の URL を入力してください。

ヒント＊ 20

Sass のキホン

本書公式サポートサイトにリンクを用意してあります。

http://book.scss.jp/
link/

http://sass-lang.com/try.html *20
もしくは Google などで「sass try」で検索して、「Try Online - Sass」というタイトルのページに移動します 図 11 。

図 11

30

Sass 公式サイトの Sassをオンライン上で試すことができるページ（2013 年 8 月現在）

このページは、Sass 公式サイトのコンテンツの 1 つで、テキストエリアにSass を記述して［Render］ボタンをクリックするだけで、Sass を CSS にコンパイルしてくれます。
ページに移動すると初期値でサンプルソースが入力されていますが、最初は何だかわからないと思いますので、いったん消去してから、簡単な下記のソースコー
ドを書いてみましょう。 その際、改行やインデントなどは皆さんそれぞれが書
ヒント＊ 21
手入力が面倒な方は、本書公式サポートサイトからコピー＆ペーストしてください。

http://book.scss.jp/
code/c1/03.html

きやすい方法で書いて問題ありません *21。
S a ss#main {
width: 600px;
p {margin: 0 0 1em;
em {color: #f00;}}}
このソースコードを見てもらうと、#main 内に p 要素のスタイルが書かれており、さらに p 要素内で em 要素のスタイルが書かれているのがわかると思います。これは、
CSS ではできなかった書き方をしていて、Sass の機能では一番使う、「ルールのネスト」（P.88）で説明しているので、あまり難しく考えずサンプルソー
スのまま書いてから、［Render］ボタンをクリックしてみましょう。 そうすると、
次の CSS が表示されると思います。
C SS（コンパイル後）#main {
width: 600px; }#main p {margin: 0 0 1em; }#main p em {color: #f00; }CSS でも入れ子のような状態で書き出されてしまうので、ちょっと可読性が1-3 何はともあれ Sass を触ってみよう

ルールのネスト（入れ子）という機能を使って書いています。詳しくは第 3 章の悪いかも知れませんが、次の CSS と同様です。

31

CHAPTER

1

C SS#main {
width: 600px;}#main p {margin: 0 0 1em;}
#main p em {color: #f00;}
この簡単なサンプルだけでは、Sass の魅力はあまり見えないかもしれません
が、いつもだったら #main 内の p 要素と em 要素にスタイルを当てるために、
毎回親のセレクタから書く必要がありました。それが、Sass の機能の 1 つであるネストを使うことで、記述が簡略化され効率的に書いていくことができます。
次に、「変数」という機能を使ったソースコードを書いてみましょう。先ほどと同じように、テキストエリアに次のソースコードを書きます。
S a ss$red: #ff1122;

Sass のキホン.notes {color: $red;}#main {
.notesArea {border: 1px solid $red;}}$（ダラー）から始まる CSS では見覚えがない記号を使っていますが、これがSass の変数という機能で、このようにあらかじめ変数に値を定義しておけば、変数の値を好きな場所から参照することができます。 同じように［Render］ボタンをクリックすると、次のような CSS が表示されます。
C SS（コンパイル後）.notes {color: #ff1122; }#main .notesArea {border: 1px solid #ff1122; }32

最初に書いた「$red: #ff1122;」が、それぞれのプロパティに適用されています。
実際にコーディングする際には、同じ値を多くのプロパティで使うことがありま
すが、変数を使うと同じ値を参照してくれるので、後から変更が入っても 1 カ所
直せば他もすべて同じ値に変更することができます。変数に関しては第 3 章の「変数（Variables）」（P.98）で詳しく説明しています。
ここでは公式サイトを利用しましたが、同様の Web サービスで「SassMeister」というサービスもあります 図 12 。

図 12

SassMeister | The Sass Playground! http://sassmeister.com/

この SassMeister は使い勝手がよく、リアルタイムに Sass を CSS にコンパ
イルしてくれたり、フレームワークの選択やアウトプットスタイルも選ぶことが公式サイトより便利に使うことができるので、気になった方は試してみてはいかがでしょうか。

Sass に対応している

ソーシャルコーディングサービス
先ほど紹介した公式サイトや SassMeiste 以外にも、ブラウザ上で簡単に

Sass を試すことができるソーシャルコーディングサービスもあります。これらのサービスは、Web 上で HTML5、CSS、JavaScript を書いてその場で実行することができるので、より実際の感じがつかめると思います。 中でも jsdo.it

1-3 何はともあれ Sass を触ってみようできます。ちょっと試しに書いたり、フレームワークを利用してみたい場合など、（http://jsdo.it/）は日本語サイトなので、ちょっと試してみるには一番とっつきやすいと思います 図 13 。

33

CHAPTER• jsdo.it
http://jsdo.it/

1

図 13

jsdo.it• Create a new Fiddle - jsFiddle
http://jsfiddle.net/• Pens picked by the Editors of CodePen
http://codepen.io/

Sass のキホン• HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
http://cssdeck.com/
実際に Sass に触れてみて、いかがでしたか？

ここで紹介した機能は、Sassの機能のほんの一部に過ぎませんが、CSS ではできなかったことが、Sass を使うことでできるようになったのが、何となくおわかりいただけたかと思います。
これらの便利な機能を使ってコーディングができるように、次章では、自身の環境に Sass をインストールする方法を説明します。

34