SassでCSSのプロパティの値を効率的管理する、変数について解説します。
Web制作において、スタイルの一貫性や効率的な管理は非常に重要です。
特に大規模なプロジェクトでは、スタイルシートが複雑化するにつれて、保守性を高めるための効果的な手法が求められます。
変数を使用することで、スタイルシート内の値を一元管理し、コードの再利用性と保守性を向上させることができます。
それではSassで変数を使用する方法について解説していきます。
なお、SassをCSSにコンパイルするやり方については以下の記事で解説していますので、Sassのコンパイルのやり方がわからない場合は、こちらから環境構築を行なってください。
INDEX
Sassの変数とは?
Sassでの変数は、スタイルシート内で値を一度定義して、後で繰り返し使用できる便利な機能です。
これにより、特定の値を複数の場所で使用する際にコードを簡潔に保ち、効率的なスタイル管理が可能となります。変数は、コードの可読性や保守性を向上させるのに役立ちます。
例えば、特定の色やフォントサイズを複数のスタイルルールで使用する場合、変数を使ってその値を一元管理することができます。
これにより、後で修正が必要な場合でも、変数の値を変更するだけで全体のスタイルを一括して更新することができます。
変数の定義と使用方法
Sassの変数は、$記号に続けて変数名を指定し、その後に値を代入します。
定義した変数は後でスタイルのプロパティ値として使用することができます。
例えば、次のように色の変数を定義すると、以下のようにCSSとしてコンパイルされます。
$main-color: #bf4080;
.content {
background-color: $main-color;
}// コンパイル後のCSS
.content {
background-color: #bf4080;
}変数の再代入
変数の値は再代入することができます。再代入する際は、変数名と新しい値を指定します。
これにより、柔軟性の高いスタイル管理が可能になります。
$main-color: #bf4080;
$main-color: #eecdde; // 再代入した変数
.content {
background-color: $main-color; // 新しい値が適用される
}// コンパイル後のCSS
.content {
background-color: #eecdde;
}変数のスコープ
Sassの変数にはスコープがあり、一般的に、Sassの変数は2つのスコープを持ちます。
- グローバルスコープ: グローバルスコープで定義された変数は、どこからでもアクセス可能です。通常、ファイルの先頭など、すべてのスタイルルールの外側で定義されます。
- ローカルスコープ: ローカルスコープで定義された変数は、そのスコープ内でのみ有効です。主にMixinや関数内で使用されます。
適切なスコープで変数を定義することで、変数の衝突を防ぎ、コードの混乱を避けることができます。
$main-color: #bf4080; //グローバル変数
.content {
$main-color: #eecdde; // ローカル変数
background-color: $main-color; // ローカル変数が適用される
}
.section {
background-color: $main-color; // グローバル変数が適用される
}// コンパイル後のCSS
.content {
background-color: #eecdde;
}
.section {
background-color: #bf4080;
}別ファイル内の変数を使用する
最後に、別ファイルで定義された変数を呼び出して使用する方法について解説します。
大規模な開発プロジェクトでは、メンテナンス性を高めるために、変数などのモジュールを別ファイルで管理することが一般的です。
これにより、コードの重複を避け、一貫性のあるスタイルを維持することが容易になります。
変数をパーシャルファイルとして作成する
Sassでは、ファイルを分割して管理することをパーシャルと呼びます。
パーシャルファイルを作成する場合は、ファイル名の先頭に_をつけます。これにより、パーシャルファイルはSassのコンパイル対象から除外されます。
それでは、以下のように変数を含むファイルを_variable.scssという名前のパーシャルファイルに移しましょう。
style.scss
_variable.scss$main-color: #bf4080;
$sub-color: #eecdde; 別ファイルの変数を呼び出して使用する。
別ファイルの変数を使用する際は@useを使用してパーシャルファイルを相対パスで指定します。
その際、パーシャルファイルの先頭の_と.scss拡張子は省略することができます。
変数を使用する場合は、@useで指定したファイル名の後にピリオド(.)を付けて変数の名前を指定します。
@use 'variable';
.content {
background-color: variable.$main-color;
}
.section {
background-color: variable.$sub-color;
}この状態でSassをコンパイルして、変数の内容が反映された状態でCSSが作成されていれば成功です。
// コンパイル後のCSS
.content {
background-color: #bf4080;
}
.section {
background-color: #eecdde;
}また、パーシャル（ファイル分割）の使い方については、以下の記事でより詳しく解説しています。
まとめ
Sassの変数を使用することで、スタイルシート内で値を一元管理し、コードの再利用性と保守性を向上させることができます。
特定の値を複数のスタイルルールで簡単に変更できるため、特に大規模なプロジェクトや長期的なメンテナンスに有効です。
さらに、Sassのパーシャル機能を活用すれば、変数を含むファイルを効率的に管理し、スタイルシートの構造を整理することができます。
ぜひこの記事を参考にして、Sassの変数を活用して効率的なスタイルシートを作成しましょう。
