Webデザインとフロントエンド開発において、スタイルシートは欠かせない要素である。その中でも、CSS（Cascading Style Sheets）は標準的なスタイルシート言語として広く採用されている。しかし、CSSには幾つかの欠点があり、その解決策としてSCSSが登場した。ここでは、CSSの欠点、SCSSの特徴と利点について解説する。
CSSとSCSSの違い
まず、CSSとSCSSについてだが、Webページのスタイルを定義するものとして共通だが、SCSSはCSSの拡張であり、変数、ネスト、ミックスインなどの機能を備えている点が異なる。これにより、スタイルの管理がしやすくなり、再利用性や保守性が向上する。
CSSの欠点とSCSSによる改善
繰り返しコード
CSSでは、同じスタイルを複数のセレクタに適用する場合、それぞれのセレクタに対して同じプロパティを繰り返し定義する必要がある。
例えば、以下のように記述する。
.header {
font-size: 16px;
color: #333;
}
.footer {
font-size: 16px;
color: #333;
}
例えばヘッダ、フッダのフォントサイズを変更する場合、このような繰り返しコード(同じ値のfont-size、colorが複数回定義されている)では変更箇所が定義数分になり、手間がかかりることになる。
下記のコードのようにSCSSではmixinを使用することで繰り返しをなくすことができる。
@mixin common-styles {
font-size: 16px; /* ここを変更するだけでよい */
color: #333;
}
.header {
@include common-styles;
}
.footer {
@include common-styles;
}
カスケーディングの複雑さ
カスケーディングとは、ある要素のあるプロパティに対する宣言が複数あるとき，宣言の強さの関係を定めて，うち 1 つの宣言だけが有効になるようにする仕組みである。
CSSのカスケーディングの仕組みは、スタイルの優先順位を理解しにくくし、意図しないスタイル適用の原因となることがあります。以下に、カスケーディングがどのように機能するのかを示す例を紹介します。
.button {
color: white;
background-color: blue;
padding: 10px;
}
.button-primary {
background-color: red;
}
上記の CSS コードでは、.button と .button-primary が独立したクラスとして定義されている。これにより、スタイルの優先順位が分かりづらくなったり、異なるスタイルファイルで定義されている場合に影響範囲を把握しづらくなったりする可能性がある。
.button {
color: white;
background-color: blue;
padding: 10px;
&-primary {
background-color: red;
}
}
SCSS のネスト構造を利用することで、.button-primary が .button に関連する修飾クラスであることが明示され、コードの可読性が向上する。
変数や関数が未対応
CSSでは変数や関数を使用することができず、同じ値を複数箇所で使用する場合は、手動で入力する必要がある。
/* カラーコードを何度も記述する必要がある */
.button {
background-color: #007bff;
color: white;
padding: 10px;
}
.alert {
background-color: #007bff; /* 再度同じカラーを記述 */
color: white;
padding: 15px;
}
このコードでは、#007bff というカラーコードをボタンとアラートの両方で使っている。カラーを変更したい場合、その部分をすべて探して変更しなければならない。下記のコードのようにSCSSではその問題を解消できる。
$primary-color: #007bff;
.button {
background-color: $primary-color;
color: white;
padding: 10px;
}
.alert {
background-color: $primary-color; /* 再利用できる */
color: white;
padding: 15px;
}
さらに、関数を使って値を計算することもできない。たとえば、サイズを倍にしたい場合、CSSでは以下のように記述する必要がある。
.button {
width: 100px; /* ここで明示的に記述 */
height: 50px;
}
.button-large {
width: 200px; /* 手動で計算する必要がある */
height: 100px;
}
この例では、button-large を作る際に、サイズを2倍にするために手動で値を変更しているため、管理が煩雑になり、修正時の手間が増えてしまう。下記のコードのようにSCSSではその問題を解消できる。
$value: 100px;
.button {
width: $value;
height: $value;
}
.button-large {
width: $value * 2; /* 倍の値を簡単に計算 */
height: $value;
}
まとめ
CSSはWebデザインやフロントエンド開発において広く使われているが、繰り返しコードやカスケーディングの複雑さ、変数や関数の未対応といった欠点がある。これに対して、SCSS（Sassの拡張版）は、mixinやネスト機能、変数および関数を利用することで、スタイルシートの保守性や可読性を大幅に向上させる。これにより、重複を避けつつ、スタイルの管理とデバッグが容易になり、開発効率が向上する。CSSの限界を補完するSCSSは、現代のWeb開発において非常に重要なツールとなっている。