書籍紹介

はじめに

Web制作者のためのSassの教科書カバー写真

本書は、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月の雨の日
平澤 隆 ＆ 森田 壮

目次

  • 第1章 Sassのキホン
    • 1-1 まずはSassって何なのかを知ろう
    • 1-2 Sassを導入する前の疑問や不安
    • 1-3 何はともあれSassを触ってみよう
  • 第2章 Sassの利用環境を整えよう
    • 2-1 Windows環境にSassをインストールする
    • 2-2 Mac環境にSassをインストールする
    • 2-3 Sassを最新版にアップデートしよう
    • 2-4 Sassコマンドの使い方を覚えよう
    • 2-5 バッチファイル／シェルスクリプトで簡単にコマンドを実行する
    • 2-6 GUI（Koala）でSassを使用する
    • 2-7 インストールや実行中にエラーが表示された場合の対処法
  • 第3章 これだけはマスターしたいSassの基本機能
    • 3-1 ルールのネスト（Nested Rules）
    • 3-2 親セレクタの参照&（アンパサンド）
    • 3-3 プロパティのネスト（Nested Properties）
    • 3-4 Sassで使えるコメント
    • 3-5 変数（Variables）
    • 3-6 演算
    • 3-7 Sassの@import
  • 第4章 高度な機能を覚えてSassを使いこなそう
    • 4-1 スタイルの継承ができる@extend
    • 4-2 柔軟なスタイルの定義が可能なミックスイン（@mixin）
    • 4-3 制御構文で条件分岐や繰り返し処理を行う
    • 4-4 関数を使ってさまざまな処理を実行する
    • 4-5 自作関数を定義する@function
    • 4-6 テストやデバックで使える@debugと@warn
    • 4-7 Sassのデータタイプについて
    • 4-8 使いどころに合わせて補完（インターポレーション）してくれる#{}
    • 4-9 変数にデフォルト値を割り当てる!default
  • 第5章 現場で使える実践Sassコーディング
    • 5-1 管理／運用・設計で使えるコーディングTips
    • 5-2 ブラウザ対応で使えるコーディングTips
    • 5-3 レイアウト・パーツで使えるコーディングTips
    • 5-4 スマホ・マルチデバイスで使えるコーディングTips
  • 第6章 Sassをさらに便利にするCompass
    • 6-1 Compassを利用する準備
    • 6-2 Compassのインポートとモジュール
    • 6-3 Compassのミックスインを使う
    • 6-4 Compassの設定変数を定義する
    • 6-5 Compassの関数（Helpers）
    • 6-6 Compassで簡単CSSスプライト（Compass Sprites）
    • 6-7 高度なCSSスプライトの使用方法（Sprite Helpers）
  • 第7章 もっとSassを使いこなして便利にしよう
    • 7-1 Sassのフレームワーク紹介
    • 7-2 Sassが使えるテキストエディタ
    • 7-3 DreamweaverのSassの対応
    • 7-4 SassのGUIコンパイラ
    • 7-5 SassのCUIツール
  • 第8章 Sass全機能リファレンス
    • 8-1 Sassの基本と高度な機能
    • 8-2 Sassの関数一覧
    • 8-3 Sassの拡張

本書の試し読み

ここでは、本書の最初から第1章 Sass のキホンまでをPDFで読むことができます。