SCSS入門・使い方を初心者向けに解説
「SCSSって聞いたことはあるけど、CSSと何が違うの？」
「使ってみたいけど、書き方や導入方法がわからない」
自分も最初は、CSSだけで書いていたので、
SCSSを見たときに $ や入れ子の書き方で手が止まりました。
結論から言うと、SCSSは
CSSをもっと書きやすくするための書き方です。
この記事では、SCSS入門として、
・SCSSとは何か
・CSSとの違い
・基本的な使い方
・よく使う書き方
・初心者がつまずきやすいポイント
をわかりやすく解説します。
現象の説明
CSSでサイトを作っていると、こんな悩みが出てきます。
・同じ色を何度も書く
・同じ余白を何度も書く
・コードが長くなって読みにくい
・修正するときに探すのが大変
例えば、ボタンの色を変えたいだけなのに、
CSSファイルの中から同じ色を何か所も探す必要があります。
そこで便利なのがSCSSです。
SCSSを使うと、
変数・入れ子・部品化ができるので、CSSより管理しやすくなります。
実際に起きたエラー
SCSS初心者のときに、よく起きるエラーは以下です。
Error: Undefined variable.または、
Error: expected "{".これは主に、
・変数名を間違えている
・; を忘れている
・{} の数が合っていない
・SCSSをCSSとして読み込んでいる
ことが原因です。
結論（先に知りたい人向け）
SCSS入門でまず覚えるべきことは、この5つです。
- SCSSはCSSを便利に書くためのもの
- 最終的にはCSSに変換して使う
$colorのように変数が使える- 入れ子でコードを整理できる
- 共通パーツをまとめて管理できる
原因の詳細
SCSSが初心者に難しく感じる理由は、
CSSと似ているけど、少し書き方が違うからです。
CSSではこう書きます。
.button {
color: #fff;
background: #0073aa;
}
.button:hover {
background: #005f8d;
}SCSSではこう書けます。
.button {
color: #fff;
background: #0073aa;
&:hover {
background: #005f8d;
}
}見た目は似ていますが、
SCSSでは .button の中に :hover をまとめて書けます。
NGコード
$main-color: #0073aa
.button {
background: $main-color;
}なぜダメなのか
上のコードは、変数の行の最後に; がありません。
SCSSでは、CSSと同じように
1つの指定の最後にセミコロンを書く必要があります。
正しくはこうです。
$main-color: #0073aa;
.button {
background: $main-color;
}解決方法（ステップ形式）
ステップ①：SCSSとは何かを理解する
SCSSとは、CSSを便利に書くための記法です。
CSSではできない便利な書き方ができます。
・変数
・入れ子
・mixin
・ファイル分割
・計算
ただし、ブラウザはSCSSをそのまま読めません。
そのため、SCSSは最後にCSSへ変換して使います。
ステップ②：SCSSファイルを作成する
まずは、以下のようなファイルを作ります。
style.scssそして、CSSを書くときと同じように記述します。
body {
font-family: sans-serif;
color: #333;
}
SCSSフォルダの中に_const.scssという定義用のファイルを作成し、
読み込むscssファイルに@use “const” as *;を記載します。
ステップ③：変数を使う
SCSSでは、よく使う色や余白を変数にできます。
$main-color: #0073aa;
$text-color: #333;
.button {
color: #fff;
background: $main-color;
}
.text {
color: $text-color;
}変数を使うと、あとから色を変えたいときに
1か所だけ修正すればOKです。
ステップ④：入れ子で書く
SCSSでは、親要素の中に子要素を書けます。
.card {
padding: 20px;
background: #fff;
.card-title {
font-size: 24px;
color: #333;
}
.card-text {
font-size: 16px;
color: #666;
}
}CSSよりも、どの要素の中にあるコードなのかがわかりやすくなります。
ステップ⑤：SCSSをCSSに変換する
SCSSはそのままではブラウザで使えません。
そのため、CSSに変換します。
変換後は、以下のようなCSSになります。
.card {
padding: 20px;
background: #fff;
}
.card .card-title {
font-size: 24px;
color: #333;
}
.card .card-text {
font-size: 16px;
color: #666;
}結果
SCSSを使うことで、以下のようになります。
・コードが見やすくなる
・同じ色や余白を何度も書かなくてよくなる
・修正が楽になる
・CSSの管理がしやすくなる
・大きいサイトでも整理しやすい
なぜ解決するのか（比較形式）
| 比較項目 | CSS | SCSS |
|---|---|---|
| 色の管理 | 毎回直接書く | 変数で管理できる |
| 親子関係 | 別々に書く | 入れ子で書ける |
| 修正 | 探すのが大変 | まとめて修正しやすい |
| ファイル管理 | 長くなりやすい | 分割して管理しやすい |
| 初心者向け | すぐ使える | 慣れると効率的 |
初心者向けまとめ
SCSSは、CSSを難しくするものではありません。
むしろ、CSSを
・書きやすくする
・読みやすくする
・直しやすくする
ためのものです。
最初は、以下の2つだけ覚えればOKです。
・変数
・入れ子
この2つだけでも、かなり便利になります。
よくあるミス
SCSS初心者がよくやるミスは以下です。
・SCSSをCSSとして直接読み込む
・; を忘れる
・$変数名 を間違える
・入れ子を深くしすぎる
・CSSに変換し忘れる
特に多いのは、
SCSSを書いたのにCSSへ変換していないミスです。
今回のポイントまとめ
・SCSSはCSSを便利に書くための記法
・ブラウザで使うにはCSSに変換する
・変数を使うと色や余白を管理しやすい
・入れ子を使うと親子関係がわかりやすい
・最初は変数と入れ子だけ覚えればOK
まとめ
SCSS入門で大切なのは、
いきなり全部覚えようとしないことです。
まずは、
$main-color: #0073aa;
.button {
background: $main-color;
&:hover {
background: #005f8d;
}
}このような基本の書き方から始めれば大丈夫です。
SCSSを使えるようになると、
CSSの修正や管理がかなり楽になります。
一言
最初は「CSSでよくない？」と思うかもしれません。
でも、実際に修正が増えてくるとSCSSの便利さがわかります。