Web制作者のためのSassの教科書【書籍紹介】Sassの基本から高度な機能まで

書籍について

CSSを書いているときに、「あ~面倒くさい。もっとCSSを効率的に書けたらな~」と思ったことはありませんか?そんなときに読む書籍なら『Web制作者のためのSassの教科書』。

SassとはCSSを記述するための言語(メタ言語)で、そのメリットは効率的なコーディングや記述の簡略化ができ、コードの管理もしやすくなります。そして、コードの内容を変更する際も素早く行うことが出来ます。

Sassの情報はWeb上でもたくさんありますが、書籍『Web制作者のためのSassの教科書』では、Sassの基本から高度な機能まで体系的に学ぶことができオススメです。

Sassのメリット

例えば以下のようなSassの機能はとても便利です。

「変数(Variables)」が使える

「変数」を使用することで、同じ値を複数のプロパティで使用する場合に、再利用ができて便利です。値を変更する場合も、変数に代入された値を変更することで、一度に素早く変更できます。

スタイルの再利用ができる

Sassにある「@mixin」機能では、定義したスタイルを指定した場所で使用でき、スタイルの再利用が可能です。そのため効率的なコーディングや記述の簡略化ができます。コードの内容変更をする際も、定義したスタイルを変更することにより簡単に行えます。

条件分岐・繰り返し処理ができる

プログラミング言語のような、条件分岐(if文)や繰り返し処理(ループ)なども使用できます。ループでは、プロパティが同じスタイルで、値をそれぞれ違う値を指定する場合などで効率的にコーディングできます。

その他にも便利な機能がたくさんあるので、詳しくは書籍を読んでみてください。

※2017/9/15に『Web制作者のためのSassの教科書』の改訂2版が発売されました。内容は大幅刷新されているようです。

書籍の目次

の画像

Web制作者のためのSassの教科書

「Sass」(サス)についての教科書的な解説書

  1. 第1章 Sassのキホン

    1. 1-1 まずはSassって何なのかを知ろう
    2. 1-2 Sassを導入する前の疑問や不安
    3. 1-3 何はともあれSassを触ってみよう
  2. 第2章 Sassの利用環境を整えよう

    1. 2-1 Windows環境にSassをインストールする
    2. 2-2 Mac環境にSassをインストールする
    3. 2-3 Sassを最新版にアップデートしよう
    4. 2-4 Sassコマンドの使い方を覚えよう
    5. 2-5 バッチファイル/シェルスクリプトで簡単にコマンドを実行する
    6. 2-6 GUI(Koala)でSassを使用する
    7. 2-7 インストールや実行中にエラーが表示された場合の対処法
  3. 第3章 これだけはマスターしたいSassの基本機能

    1. 3-1 ルールのネスト(Nested Rules)
    2. 3-2 親セレクタの参照&(アンパサンド)
    3. 3-3 プロパティのネスト(Nested Properties)
    4. 3-4 Sassで使えるコメント
    5. 3-5 変数(Variables)
    6. 3-6 演算
    7. 3-7 Sassの@import
  4. 第4章 高度な機能を覚えてSassを使いこなそう

    1. 4-1 スタイルの継承ができる@extend
    2. 4-2 柔軟なスタイルの定義が可能なミックスイン(@mixin)
    3. 4-3 制御構文で条件分岐や繰り返し処理を行う
    4. 4-4 関数を使ってさまざまな処理を実行する
    5. 4-5 自作関数を定義する@function
    6. 4-6 テストやデバックで使える@debugと@warn
    7. 4-7 Sassのデータタイプについて
    8. 4-8 使いどころに合わせて補完(インターポレーション)してくれる#{}
    9. 4-9 変数にデフォルト値を割り当てる!default
  5. 第5章 現場で使える実践Sassコーディング

    1. 5-1 管理/運用・設計で使えるコーディングTips
    2. 5-2 ブラウザ対応で使えるコーディングTips
    3. 5-3 レイアウト・パーツで使えるコーディングTips
    4. 5-4 スマホ・マルチデバイスで使えるコーディングTips
  6. 第6章 Sassをさらに便利にするCompass

    1. 6-1 Compassを利用する準備
    2. 6-2 Compassのインポートとモジュール
    3. 6-3 Compassのミックスインを使う
    4. 6-4 Compassの設定変数を定義する
    5. 6-5 Compassの関数(Helpers)
    6. 6-6 Compassで簡単CSSスプライト(Compass Sprites)
    7. 6-7 高度なCSSスプライトの使用方法(Sprite Helpers)
  7. 第7章 もっとSassを使いこなして便利にしよう

    1. 7-1 Sassのフレームワーク紹介
    2. 7-2 Sassが使えるテキストエディタ
    3. 7-3 DreamweaverのSassの対応
    4. 7-4 SassのGUIコンパイラ
    5. 7-5 SassのCUIツール
  8. 第8章 Sass全機能リファレンス

    1. 8-1 Sassの基本と高度な機能
    2. 8-2 Sassの関数一覧
    3. 8-3 Sassの拡張

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。