大規模なスタイルセットを記述する場合、CSS では限界があります。そこで登場するのが、CSS プリプロセッサ と呼ばれるツールです。その中でも代表的なのが SCSS (サス、Sassy CSS) です。
SCSS - CSS プリプロセッサ
SCSS は CSS をより効率的かつ構造的に書くための拡張言語です。SCSS コードは、CSS に変換可能であり、実行時には CSS としてブラウザに解釈されます。
SCSS の主な機能とメリット
| メリット | SCSS 記法 | メリット |
|---|---|---|
| 変数 | $primary-color: #007bff; |
一括変更、管理のしやすさ |
| ネスト | .parent { .child { ... } } |
コードの可読性、構造の把握が容易 |
| ミックスイン | @mixin my-btn { ... } |
スタイルの再利用、記述量の削減 |
| インポート | @import 'variables'; |
ファイル分割、管理のしやすさ |
解説
- 変数: 色やフォントサイズなど、繰り返し使う値を定義して管理できます。変更があった際に一箇所修正するだけで済むため、メンテナンスが容易です。
- ネスト: CSS セレクタを入れ子 (ネスト) にして書くことができ、HTML の構造を反映した、より読みやすいコードにできます。
- ミックスイン: 繰り返し使う CSS のまとまりを関数のように定義し、必要な場所で呼び出して使えます。ベンダープレフィックスの管理などにも役立ちます。
- インポート: CSS ファイルを分割して管理し、必要な場所でまとめて読み込むことができます。
SCSS コード例
変数
$primary-color: #007bff;
$font-size-base: 16px;
ネスト
.header {
background-color: #f8f9fa;
padding: 20px;
h1 {
color: $primary-color;
// 変数を使った計算も可能
font-size: $font-size-base * 1.5;
}
nav {
ul {
list-style: none;
padding: 0;
li {
display: inline-block;
margin-right: 15px;
a {
color: #333;
text-decoration: none;
// & で親セレクタを参照
&:hover {
// 色を暗くする関数
color: darken($primary-color, 10%);
}
}
}
}
}
}
ミックスイン (mixin)
@mixin button-style($bg-color, $text-color: white) {
background-color: $bg-color;
color: $text-color;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.primary-button {
// ミックスインを呼び出す
@include button-style($primary-color);
}
.secondary-button {
@include button-style(#6c757d);
}
Vue プロジェクトとの統合
Vue プロジェクトで SCSS を使うには、SCSS をコンパイルするためのローダー (sass 等) をインストールする必要があります。
npm install -D sass
そして Vue コンポーネントの <style> タグに lang="scss" を追加します。
<style lang="scss" scoped>
// ここに SCSS を記述
.my-component {
h2 {
color: blue;
}
}
</style>
SCSS を導入することで、CSS によるスタイル定義を構造的に整理できるようになります。それによって大規模アプリでもスタイリングの管理がしやすくなります。