Sass運用スターター完全ガイド！初心者向けに変数・パーシャル・ビルドをやさしく解説
生徒
「Bootstrapをカスタマイズしたいんですが、Sassってよく出てきます。そもそもSassって何ですか？」
先生
「Sassは、CSSをもっと便利に書けるようにする仕組みです。Bootstrapでは色やサイズなどをSassで自由に変更できますよ。」
生徒
「難しそうですね…。初心者でも使えるように、やさしく教えてもらえますか？」
先生
「もちろんです！変数、パーシャル、ビルドスクリプトの基本からゆっくり見ていきましょう。」
1. Sass（サス）とは？CSSが便利になる拡張機能
Sass（サス）は、CSS（スタイルシート）を効率よく書けるようにする拡張言語です。パソコンに例えると、CSSが「手書きの手紙」なら、Sassは「テンプレート付きの自動印刷機」です。
Sassでは「変数（へんすう）」を使って色やサイズをまとめたり、「パーシャル」でファイルを分割したり、「ビルド」で自動的にCSSに変換することができます。
2. Sassの変数で色やサイズをまとめよう
CSSで毎回同じ色を何度も書くのは面倒です。Sassでは「変数（へんすう）」を使えば、色やサイズを一つにまとめて管理できます。
変数は「$（ドルマーク）」で始まります。たとえば次のように書きます。
<style>
$main-color: #007bff;
h1 {
color: $main-color;
}
</style>
<h1>これはメインカラーです</h1>
3. Sassのパーシャル（部分ファイル）で整理整頓
「パーシャル」はSassのファイルを分けて管理する方法です。大きな家を部屋ごとに分けて掃除するように、ファイルを小さくして見やすくします。
ファイル名の先頭に「_（アンダーバー）」をつけて、他のSassファイルから読み込みます。
例：「_variables.scss」「_layout.scss」「_buttons.scss」など
そして、それらをmain.scssでまとめて読み込みます。
@import 'variables';
@import 'layout';
@import 'buttons';
4. SassをCSSに変換するビルドとは？
パソコン初心者にはちょっと聞き慣れない言葉ですが、「ビルド」とはSassファイルを通常のCSSファイルに変換する作業のことです。
Sassのままではブラウザに表示されません。変換してはじめて使えるようになります。
変換にはツールが必要です。初心者でも使いやすい「npmスクリプト」を使った雛形を紹介します。
5. 雛形プロジェクトのファイル構成と中身
以下のようにフォルダとファイルを準備しましょう。
- scss/ ─ Sassファイルを入れるフォルダ
- scss/_variables.scss ─ 色やサイズなどの変数
- scss/main.scss ─ 読み込みまとめ用
- css/ ─ 出力先のフォルダ（自動で生成される）
たとえば次のような内容を書きます。
// _variables.scss
$font-color: #333;
$bg-color: #f9f9f9;
// main.scss
@import 'variables';
body {
background-color: $bg-color;
color: $font-color;
}
6. 初心者向けnpmスクリプトの雛形
npm（エヌピーエム）は、Sassを自動でCSSに変換するツールです。パソコン初心者でもコマンド1つで変換できます。
以下のように「package.json」にスクリプトを書きます。
{
"name": "sass-project",
"version": "1.0.0",
"scripts": {
"sass": "sass scss/main.scss css/style.css --watch"
},
"devDependencies": {
"sass": "^1.65.0"
}
}
コマンドは次の通りです。
npm run sassと入力すれば、Sassが自動でCSSに変換され、変更をリアルタイムで監視してくれます。
7. ビルド後のCSSをHTMLに読み込む方法
ビルドして生成されたstyle.cssは、HTMLファイルで次のように読み込みます。
<link href="css/style.css" rel="stylesheet">
8. よくある質問と初心者がつまずくポイント
● パーシャルファイルが読み込まれない
→ ファイル名の最初に_（アンダーバー）が付いているか確認しましょう。
● 変数が使えない
→ @importでvariablesファイルを読み込んでいない可能性があります。
● HTMLで反映されない
→ Sassから生成されたCSSファイルを正しくHTMLで読み込めているか確認しましょう。
この記事を読んだ人からの質問
