Tech Labo F

Web制作している中で、メインカラーをやっぱりこの青に変えたい。
でもどこだっけ？ってなりませんか？
何ヶ所もある色コードを一つずつ書き換える作業は、時間もかかるしミスの元です。

そんな、修正地獄から救ってくれるのが、SCSSの変数（Variables）。

今回は、実務で必ず使われる変数の設定方法と、最新の管理テクニック（@use）を解説します。

1. 変数とは？値を「名前」で保存する箱

変数とは、色コードや数値に「名前をつけて保存しておく箱」のことです。
一度定義してしまえば、あとはその「名前」を呼び出すだけで使い回すことができます。

基本の書き方 SCSSでは、$（ダラー）マークを使って変数を定義します。

SCSS

// 定義：名前と値を決める
$main-color: #3498db;

// 使用：定義した名前を書く
.button {
background-color: $main-color; // #3498db にコンパイルされる
}
.title {
color: $main-color; // ここも #3498db になる
}

もし色を変えたくなったら、最初の定義（$main-color）を1箇所書き換えるだけ。
それを使っている全ての箇所のスタイルが一瞬で変更されます。

2. 実務の鉄則：_variables.scss で一元管理

変数は便利ですが、各ファイルに散らばっていては管理できません。
実務では、_variables.scss という専用ファイルを作り、サイト全体の設計図として一元管理する事があると思います。

_variables.scss の記述例 以下のように、色やフォント、ブレークポイントなどを
まとめて記述します。

SCSS

// _variables.scss
// 接頭辞（$c- や $w-）をつけると入力補完が効きやすく便利です

$c-primary: #007bff; // メインカラー
$c-text: #333333; // テキスト色
$c-bg: #f9f9f9; // 背景色

$w-content: 1080px; // コンテンツ幅
$sp-breakpoint: 768px; // スマホ切り替え幅

このようにファイルを分けておけば、デザイン変更の際もこのファイルを開くだけで済みます。

3. 最新ルール：@use を使った読み込み方

変数を定義したファイル（_variables.scss）を、スタイルを書くファイル（_header.scssなど）で
読み込む方法です。最新のDart Sassでは、@importではなく@useを使用します。

名前空間（Namespace）の活用 @useを使う際は、どのファイルから来た変数かを明確にするために、ファイル名（またはエイリアス）を頭につけて呼び出します。

SCSS

// _header.scss

// “variables” ファイルを “v” という名前（あだ名）で読み込む
@use “variables” as v;

header {
// v の中の $c-primary を使う、という意味になる
background-color: v.$c-primary;
color: v.$c-text;
max-width: v.$w-content;
}

「v.$変数名」と書くことで、**「これは変数ファイルで定義された値を使っているんだな」**とひと目で分かるようになり、コードの安全性と可読性が向上します。

今回のまとめ