SASSの変数
この記事ではSASSの変数について説明します。
SASSの変数について詳細に解説し、実際の使い方をステップバイステップで学びます。
YouTube Video
SASSの変数
SASSは、CSSをより柔軟かつ効率的に記述するためのCSS拡張言語です。その中でも変数は、スタイルの一貫性を保ちながら、変更を容易にするための強力な機能です。
SASSの変数とは？
SASSの変数は、CSSで頻繁に使用する色、フォントサイズ、間隔などの値を一箇所にまとめて管理できる仕組みです。
変数を使用することで、スタイルを簡単に変更したり、コードの可読性を向上させることができます。
変数の記述方法
変数は次のように記述できます。
1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;$記号を、変数名の先頭に付ける必要があります。variable-nameは、変数の名前です。わかりやすく命名することが推奨されます。valueは、変数に割り当てる値です。
変数の基本的な使い方
以下は、SASS変数の基本的な例です。
1// Variable definition
2$primary-color: #3498db;
3$secondary-color: #2ecc71;
4$base-font-size: 16px;
5
6// Variable usage
7body {
8 font-size: $base-font-size;
9 color: $primary-color;
10 background-color: $secondary-color;
11}$primary-colorなどの変数を一度定義すれば、同じ値を何度でも再利用できます。- 値を変更する際は、変数の定義部分だけを変更すれば済むため、メンテナンス性が向上します。
出力されるCSS
1body {
2 font-size: 16px;
3 color: #3498db;
4 background-color: #2ecc71;
5}ネスト内での変数の活用
SASSのネスト機能と変数を組み合わせると、コードがさらに整理され、管理がしやすくなります。
1@use "sass:color";
2
3// Variable definition
4$button-bg: #e74c3c;
5$button-color: #fff;
6$button-padding: 10px 20px;
7
8.button {
9 background-color: $button-bg;
10 color: $button-color;
11 padding: $button-padding;
12
13 &:hover {
14 background-color: color.adjust($button-bg, $lightness: -10%);
15 }
16}- ネストされたセレクタ内でも、変数を利用できます。
color.adjust関数で色を10%暗くするなど、変数と組み合わせることで柔軟なスタイルが実現できます。
出力されるCSS
1.button {
2 background-color: #e74c3c;
3 color: #fff;
4 padding: 10px 20px;
5}
6
7.button:hover {
8 background-color: #c0392b;
9}デフォルト値を持つ変数
SASSでは、変数にデフォルト値を設定することが可能です。デフォルト値を設定することで、既存の変数を上書きせずに使用できます。
1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8 font-size: $font-size;
9}!defaultを付けると、変数がすでに定義されている場合は上書きされません。- チーム開発やプロジェクト全体の設定で役立ちます。
出力されるCSS
1p {
2 font-size: 16px;
3}変数のスコープ
SASS変数にはスコープがあり、定義する場所によって有効範囲が異なります。スコープを理解することで、意図しない変数の上書きを防ぐことができます。
- グローバルスコープ
1$global-color: #ff6347;
2
3.header {
4 color: $global-color;
5}- グローバルスコープの変数は、ファイル全体で使用可能な変数です。
- ローカルスコープ
1.card {
2 $card-bg: #f0f0f0;
3 background-color: $card-bg;
4}
5
6.button {
7 // Error: $card-bg cannot be used
8 background-color: $card-bg;
9}- ローカルスコープの変数は、特定のネストやファイル内でのみ有効な変数です。
計算における変数の利用
SASS変数は計算にも利用できます。計算はユニット付きの値や色でも可能です。
1@use "sass:color";
2
3$base-padding: 10px;
4$double-padding: $base-padding * 2;
5
6.container {
7 padding: $double-padding;
8}
9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14 color: $lighter-color;
15}出力されるCSS
1.container {
2 padding: 20px;
3}
4
5h1 {
6 color: #5dade2;
7}- 色の調整や間隔の計算に変数を活用すると、保守性が向上します。
まとめ
SASSの変数は、CSSコードの効率的な管理とメンテナンスに欠かせない機能です。
SASSの変数を活用すると、プロジェクト全体のスタイルを一貫させ、変更も簡単になります。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。