CSSを書いていると、「もっと効率的にスタイルを管理できたらいいのにな…」と感じること、ありませんか？特に、プロジェクトが大きくなると、CSSファイルがどんどん膨れ上がって、管理が大変になりますよね。そんなときに登場するのが「SCSS」という便利なスタイルシート言語です。
「SCSSって聞いたことあるけど、普通のCSSと何が違うの？」と思うかもしれません。この記事では、SCSSとは何か、その基本的な使い方をやさしく解説していきます。一緒に学んで、CSSを書くのがもっと楽になる方法を身につけていきましょう！
SCSSってなに？
SCSSとは、Sassy CSSの略で、CSSを拡張したスタイルシートの記法の一つです。
実際にはCSSそのものを置き換えるわけではなく、CSSに便利な機能を追加したものと考えるとわかりやすいです。
SCSSのファイルは、最終的に普通のCSSに変換されてブラウザで使われるため、
SCSSで書いておくと効率的にCSSを管理できます。
では、SCSSが具体的に何を提供してくれるのか、基本的な機能を見ていきましょう。
1. ネスト（入れ子構造）でCSSをもっと読みやすく
CSSを書くとき、セレクタが階層化される場面はよくありますよね。
普通のCSSでは、こんな感じで書くことが多いです。
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration: none;
}
SCSSでは、ネスト構造を使って、セレクタの階層をもっと見やすく書くことができます。
これで、関連するスタイルをまとめて書けるので、読みやすく、管理もしやすいです。
// SCSSではネスト（入れ子）することができる。
nav {
ul {
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
}
}
}
}
どうですか？
一つの要素に関連するスタイルがきれいにまとまっているので、
どの要素に対するスタイルなのかが一目で分かりやすくなります。
たしかに
2. 変数を使って値を再利用
CSSでは、色やフォントサイズなど、同じスタイルを何度も繰り返し書くことがあります。
SCSSでは、変数を使ってこれらの値を一箇所にまとめて管理できます。
これによって、もし色を変えたい場合でも、変数の値を一回変更するだけで済むので、とても便利です。
例えば、CSSではこう書いていたスタイル↓
h1 {
color: #3498db;
}
button {
background-color: #3498db;
}
これをSCSSで変数を使って書くと、次のようになります。
$primary-color: #3498db;
h1 {
color: $primary-color;
}
button {
background-color: $primary-color;
}
これで、$primary-colorを変更するだけで、
関連するすべてのスタイルに反映されるので、保守が楽になります。
おぉ、プログラムっぽい！
3. 部分ファイルをインポートしてコードを整理
CSSのファイルが大きくなると、探すのが大変になりますよね。
SCSSでは、部分ファイル（パーシャル）を作って、
複数の小さなファイルに分割し、それらを一つのファイルにまとめることができます。
部分ファイルは、名前の先頭にアンダースコアをつけて作ります（例：_header.scss）。
こうすると、そのファイルが直接CSSにコンパイルされるのではなく、
他のSCSSファイルにインポートされて使われます。
// _header.scss
header {
background-color: $primary-color;
}
// main.scss
@import 'header'; /* _header.scssをインポート */
これで、コードを整理してスッキリと管理できます。
4. 普通のCSSもそのまま使える
SCSSの素晴らしいところは、普通のCSSもそのまま書けることです。
CSSを書くのと同じ感覚で始められるため、CSSの知識をすぐに活かせます。
例えば、以下のCSSはSCSSとしても全く同じように書けます。
body {
margin: 0;
padding: 0;
}
そのため、「CSSは書けるけど、SCSSはちょっと不安…」という方でも、簡単に移行できますし、
少しずつSCSSの便利な機能を取り入れていくことができます。
ちょっとずつ覚えていけばいいのは助かる
CSSとの違いって何？
SCSSとCSSの違いは、主にコードの書き方の効率化にあります。
SCSSは、CSSを拡張してさらに強力な機能を提供してくれますが、
最終的にコンパイルされて通常のCSSに変換されます。
つまり、ブラウザが直接SCSSを理解するわけではなく、
開発時にはSCSSを書き、実際にブラウザで動作するのはCSSです。
そのため、SCSSのメリットは
- コードが管理しやすくなる
- ミスが減る
- 保守が簡単になる
など、特にプロジェクトが大きくなったときに効果を発揮します。
その他のCSS拡張言語
SCSSはCSSを拡張した言語ですが、他にも同様の拡張言語がいくつか存在します。
例えば
- SASS（SCSSの一種ですが、インデントベースの書き方をします）
- LESS（同じくCSSを拡張した言語で、SCSSに似た機能を提供します）
- Stylus（こちらも拡張言語の一つで、シンプルな記法が特徴です）
それぞれ特徴があり、用途や好みによって使い分けられますが、
現在のウェブ開発ではSCSSが最も広く使われているので、まずはSCSSから始めると良いでしょう。
とりあえずSCSSから始めてみよう
まとめ
SCSSは、CSSをもっと効率的に、そして管理しやすくするための強力なツールです。
ネストや変数、部分ファイルのインポートといった基本的な機能を使うだけでも、
プロジェクトの規模が大きくなったときに大きな助けになります。
初めはCSSと同じように書いて、
少しずつSCSSの機能を取り入れていけば、自然にその便利さを実感できるはずです。
焦らず、ゆっくり学んでいきましょうね！
あざした！
