PR：この記事にはアフィリエイトリンクが含まれます。
フロントエンドでCSSを書くと、色や間隔のルールをそろえたり、似た部品のスタイルをまとめたりする場面が増えます。そんなとき頼りになるのがSass。SCSSやDart Sass、@useを学べる本を探している方も多いですよね。
Sass本は一冊ごとに得意分野が違います。言語機能を広く扱う本、HTML・CSSの制作演習にSCSSを取り入れる本、Bootstrapのテーマ調整を学べる本。それぞれの軸をつかんでおきたいところです。
ここでは各書の内容と、学習に役立つSassの基礎を紹介します。価格は税込の参考価格を目安にしていますが、実売価格は時期や販売店によって変わります。
Sass本おすすめ早見表
| 書名 | 主な内容 | 向いている人 | 参考価格 |
|---|---|---|---|
 Web制作者のためのSassの教科書 改訂3版 | Dart Sass、@use、@forward、mixin | Sassを体系的に学びたい人 | 2,970円 |
 初心者からちゃんとしたプロになる HTML+CSS実践講座 | SCSS、BEM、サイト制作演習 | HTML・CSSと一緒に実践したい人 | 2,860円 |
 Bootstrap 5 フロントエンド開発の教科書 | Bootstrap 5とSassによるカスタマイズ | Bootstrapのテーマ調整を学びたい人 | 3,828円 |
3冊ともSassを扱いますが、深掘りするテーマは異なります。とくにDart Sassや@useを学ぶなら、言語機能を中心に扱う本かどうかを確認しましょう。
HTMLやCSSの基礎を制作演習で復習したい人には、Sass以外の章も助けになります。Bootstrapを使っている人には、テーマのカスタマイズを扱う本が実務に結びつきやすいでしょう。
価格は税込の参考価格です。紙版の実売価格は販売店や時期で変わるため、購入時に最新の表示を確認してください。
Dart Sassが基準になる理由
Sassでは変数やmixin、ネストを使ってスタイルを組み立てます。SCSSはその記法のひとつで、CSSに近い波括弧やセミコロンを使う形式です。ファイルをCSSへ変換してからブラウザーに読み込ませます。
Dart SassはSassの公式実装で、現在の制作環境の基本です。SCSSを開発時にCSSへコンパイルし、ブラウザーにはそのCSSを読み込ませます。
Node.jsとnpmが使えるなら、npmでsassを追加してコマンドやnpm scriptsからコンパイルできます。エディター拡張という方法もあり、普段の開発環境でCSSまで変換する流れを試せます。
SCSSを編集したら、生成されたCSSの出力先まで確認しておきましょう。そこまで追うと、実務のリポジトリでもコンパイルの流れを把握しやすくなります。
@useで変わる設計
@useは別のSassファイルをモジュールとして読み込む機能です。たとえば@use 'tokens/colors' as color;と書くと、変数をcolor.$brandのように名前空間付きで参照できます。
名前空間を付けると、同じ名前の変数やmixinも衝突しにくくなり、値の出どころを追いやすくなります。ファイル数の多いプロジェクトほど助かる機能です。
@forwardは、モジュールが公開する機能を別のファイル経由でまとめて渡す仕組みです。ファイルごとに機能を分けながら、利用側へ整理した入口を用意できます。@useとの役割を区別できれば、モジュール構成を考えやすくなります。
古い記事やプロジェクトでは@importも見かけますが、Dart Sassでは非推奨です。既存コードを読むために意味を知りつつ、新しく学ぶ際は@useと@forwardを軸に解説する本が現場で役立つでしょう。
Web制作者のSass教科書
『Web制作者のためのSassの教科書 改訂3版 Webデザインの現場で必須のCSSプリプロセッサ』は、Sassの構文から周辺技術まで体系立てて学べる本です。インプレス刊、2024年12月11日発売。328ページ、B5変形判です。
第2章の利用環境はDart Sass対応に刷新され、VS Code拡張とnpm scriptsの両方の導入方法を扱います。自分の環境に合う手順を見つけやすい構成です。
ネストや親セレクタ、変数、演算、パーシャルといった基本から、@use、@forward、@mixinまで幅広く扱います。実践テクニックやPostCSS、フレームワーク、ツールも収録。Sass全機能のリファレンスも確認できます。
HTMLとCSSの基礎があり、Sassは初めてという人におすすめです。参考価格は税込2,970円。Dart Sassからモジュール設計まで順に学びたい人に合います。
HTML制作まで学ぶ本
『初心者からちゃんとしたプロになる HTML+CSS実践講座』は、SCSSとWebページ制作を一緒に学びたい人向けです。エムディエヌコーポレーション刊、2020年発売の296ページ。HTMLとCSSをひと通り学んだ後の実践教材として取り組めます。
Lesson 6ではSCSSを取り入れ、BEMやコンポーネント単位の設計と合わせて解説します。レスポンシブヘッダー、スライドショー、コンテンツ、カルーセルなどの制作演習があり、コードが画面に反映される過程を追えます。
Node.jsやGulp、バージョン管理システムの導入も扱います。出版社の目次ではDart Sassや@useの項目を確認できないため、これらを学ぶなら別の教材も併用するとよいでしょう。参考価格は税込2,860円です。
Bootstrap特化の一冊
『Bootstrap 5 フロントエンド開発の教科書』は、Bootstrap 5の機能を幅広く知りたい人に合います。技術評論社刊、2022年発売の544ページです。レイアウトからコンポーネント、JavaScript UIまで扱います。
第10章では、Sassを使ったBootstrapのカスタマイズとCSS変数を解説します。Node.jsとnpm版Dart SassでSCSSをCSSへコンパイルし、_variables.scssの変数を調整して初期スタイルを変える流れも学べます。
この本はBootstrapの利用とカスタマイズを中心に扱います。Bootstrapを使ったWebページのモックアップ制作もあり、テーマの色や見た目を調整したい人に実例を示します。参考価格は税込3,828円です。
学びを定着させる
読み始める前に、何ができるようになりたいかを言葉にしてみましょう。Sassの基本構文、@useによる整理、サイト制作、Bootstrapのテーマ調整では、学ぶ目的がそれぞれ異なります。
掲載コードを写した後、変数名やファイル構成を自分の小さな制作物に合わせて変えると理解が深まります。SCSSの修正がCSSにどう反映されるか追えば、構文と設計の両方を把握できます。
Sassの機能とCSS設計のよさは別の話です。ファイル分割や命名の理由を説明できるか、チームでコードを追いやすいかも確かめましょう。学んだ内容をフロントエンドの仕事に結びつけられます。
結論
Dart Sassと@useを体系的に学ぶなら、『Web制作者のためのSassの教科書 改訂3版』がおすすめです。利用環境の構築からモジュール、mixinまで扱うため、Sassの基本を順番に押さえられます。
HTML・CSSの制作演習を重視する人には『初心者からちゃんとしたプロになる HTML+CSS実践講座』がおすすめです。Bootstrap 5のテーマを調整したい人には『Bootstrap 5 フロントエンド開発の教科書』が合います。学びたい内容に合わせて選んでください。
価格は税込の参考価格を目安にし、実売価格は購入時に確認してください。いま直面している課題と本の中心テーマが重なる一冊なら、読み進める内容を実務にも活用できます。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
