Sassの書き方（変数）

変数の書き方

Sassではプログラミング言語でお馴染みの変数を使うことができます。
変数にはCSSプロパティの値を入れておいて共通化したり、計算結果を一時的に保存しておいたり様々な場所で活躍するため、Sassを使いこなすうえで非常に重要な機能です。

以下の例ではCSSの文字サイズと色を変数に入れて共通化しています。

style.scss

//--------------------
// Setting
//--------------------

// Font Size
$baseFontSize: 16px;
$fontSize12: 12px / 16px + rem;
$fontSize14: 14px / 16px + rem;
$fontSize15: 15px / 16px + rem;
$fontSize16: 16px / 16px + rem;
$fontSize18: 18px / 16px + rem;
$fontSize20: 20px / 16px + rem;
$fontSize24: 24px / 16px + rem;

// Font Color
$colorTitle: #c9003e;
$colorText: #222;
$colorLink: #0069d4;

//--------------------
//--------------------

body {
	font-size: $fontSize16;
	background-color: #f7f7f7;
}

.content {

	h1 {
		font-size: $fontSize20;
		color: $colorTitle;
	}

	p {
		font-size: $fontSize14;
		color: $colorText;

		a {
			color: $colorLink;
		}
	}
}

コンパイルして出力されたCSSでは以下のようになります。
赤字の箇所は変数を展開して値として出力しています。

style.css

body {
	font-size: 1rem;
	background-color: #f7f7f7;
}

.content h1 {
	font-size: 1.25rem;
	color: #c9003e;
}

.content p {
	font-size: 0.875rem;
	color: #222;
}

.content p a {
	color: #0069d4;
}

変数は「$ + 変数名」の形で名前を付けて、値はCSSプロパティと同様に「:」の右側に書きます。
また、変数自体はコンパイルするときに値が展開されるのみで出力したCSSには残りません。

変数名に使える文字

変数名は半角英数の他に「–（ハイフン）」「_（アンダースコア）」、日本語を含めたマルチバイト文字を使うことができます。
それ以外の記号と、変数名の先頭に数字は使えません。

使うことができる変数名

$mgb10: 10px; // 半角英数
$MGB15: 15px; // 半角英数 大文字
$mgb_10: 10px; // _（アンダースコア）
$mgb-15: 15px; // -（ハイフン）
$余白３０: 30px; // 全角、日本語
$_mgb10: 10px; // 先頭に_（アンダースコア）
$-mgb10: 10px; // 先頭に-（ハイフン）
$---mgb20: 20px; // 先頭に_（アンダースコア）3つ
$___mgb20: 20px; // 先頭に-（ハイフン）3つ

使うことができない変数名

$10mgb: 10px; // 先頭に数字
$mgb10+: 10px; // 「-」「_」以外の記号
$$mgb10: 10px; // 先頭に「-」「_」以外の記号

変数の値に使えるデータの型

変数に入れることができる値は、Sassで扱うことができる8種類のデータ型になります。

Sassのデータ型では単位付きの数値はNumberになったり、半角スペースや「,」で区切った複数の値の場合はListになる特徴があります。
以下の例はいくつかのパターンの値をへ数に入れて、値の型を調べるtype-ofメソッドを@debugよりデバッグ出力した結果になります。

データ型の@debugによる出力例

// Number
$number1: 1;
$number2: 0.25;
$number3: -100;
$number4: 1.25rem;
$number5: 16px;
$number6: 20px 10px;

@debug( type-of($number1)); // DEBUG: number
@debug( type-of($number2)); // DEBUG: number
@debug( type-of($number3)); // DEBUG: number
@debug( type-of($number4)); // DEBUG: number
@debug( type-of($number5)); // DEBUG: number
@debug( type-of($number6)); // DEBUG: list

// String
$string1: "Test";
$string2: 'Test';
$string3: Test; 

@debug( type-of($string1)); // DEBUG: string
@debug( type-of($string2)); // DEBUG: string
@debug( type-of($string3)); // DEBUG: string

値の上書き

変数の値は何度でも上書きが可能です。
また、他のプログラミング言語であるような一度値を入れたらロックする「定数」に該当する機能はありません。

以下の例では変数$marginBottomに値を入れたり、参照を繰り返しています。

style.scss

$marginBottom: 80px;

#content1 {
	margin-bottom: $marginBottom;
}

$marginBottom: 50px;

#content2 {
	margin-bottom: $marginBottom;
}

$marginBottom: 100px;

#content3 {
	margin-bottom: $marginBottom;
}

コンパイルすると以下のCSSを出力します。

style.css

#content1 {
  margin-bottom: 80px;
}

#content2 {
  margin-bottom: 50px;
}

#content3 {
  margin-bottom: 100px;
}

スコープ

Sassの変数にはスコープがあります。

ネストしていない場所で書かれた変数はグローバル変数となり、ネスト内外のどこからでも参照できる変数になります。
ネスト内で作成した変数についてはそのネスト内と子孫のネストでのみ使用できるローカル変数になります。

変数のスコープ範囲の例

// グローバル変数 $v1
$v1: 10px;

#content1 {
	// ローカル変数 $v2
	$v2: 20px;

	padding: $v1; // OK

	h1 {
		// ローカル変数 $v3
		$v3: 30px;

		padding: $v2; // OK
		margin-bottom: $v3; // OK
	}

	p {
		padding: $v2; // OK

		span {
			margin-left: $v2; // OK
		}
	}

	margin-bottom: $v3; // NG
}

#content2 {
	padding: $v2; // NG

	h1 {
		padding: $v1; // OK
	}

	p {
		padding: $v1; // OK
	}
}

グローバル変数とローカル変数は別々の変数として扱われます。
もし以下のように同じ変数名がある場合はローカル変数の値が優先されます。

style.scss

// グローバル変数 $marginBottom
$marginBottom: 80px;

#content1 {
	// ローカル変数 $marginBottom
	$marginBottom: 50px;
	margin-bottom: $marginBottom;　// ローカル変数の値
}

#content2 {
	margin-bottom: $marginBottom;　// グローバル変数の値
}

コンパイルすると以下のCSSを出力します。

style.css

#content1 {
	margin-bottom: 50px;
}

#content2 {
	margin-bottom: 80px;
}

グローバル変数を優先する!defaultフラグ

グローバル変数とローカル変数で同じ名前の変数があるときはローカル変数が優先されますが、変数を作成するときに!defaultフラグを付けるとグローバル変数を優先することができます。

style.scss

// グローバル変数
$marginBottom: 80px;

#content1 {
	// ローカル変数
	$marginBottom: 50px;
	margin-bottom: $marginBottom;
}

#content2 {
	// ローカル変数（※グローバル変数を優先）
	$marginBottom: 50px !default;
	margin-bottom: $marginBottom;
}

#content3 {
	margin-bottom: $marginBottom;
}

コンパイルすると以下のCSSを出力します。

style.css

#content1 {
	margin-bottom: 50px;
}

#content2 {
	margin-bottom: 80px;
}

#content3 {
	margin-bottom: 80px;
}

ローカル変数をグローバル変数にする!globalフラグ

グローバル変数とローカル変数は同じ名前の変数も別々の変数として扱いますが、ローカル変数を作成するときに!globalフラグを付けるとグローバル変数にすることができます。

style.scss

// グローバル変数
$marginBottom: 80px;

#content1 {
	// グローバル変数として変数を作成
	$marginBottom: 50px !global;
	margin-bottom: $marginBottom;
}

#content2 {
	margin-bottom: $marginBottom;
}

#content3 {
	// ローカル変数（※グローバル変数を優先）
	$marginBottom: 100px !default;
	margin-bottom: $marginBottom;
}

コンパイルすると以下のCSSを出力します。

style.css

#content1 {
  margin-bottom: 50px;
}

#content2 {
  margin-bottom: 50px;
}

#content3 {
  margin-bottom: 50px;
}

補完（Interpolation）

補完（Interpolation）は変数を「#{変数名}」で囲みます。
補間を使うとセレクタ名やbackgroundプロパティのurl()内で変数の値を使うことができます。

style.scss

// 変数を設定
$content1: "content1";
$img_path: "/asset/image/bg_content1.png";

##{$content1} {
	padding: 40px;
	background: url(#{$img_path}) left top no-repeat;

	.#{$content1}_title {
		font-size: 2.0rem;
		line-height: 1.2em;
		color: #222;
	}

	.#{$content1}_lead {
		font-size: 1.25rem;
		color: #555;
	}
}

出力されたCSSでは、次のように変数の値を展開します。

style.css

#content1 {
	padding: 40px;
	background: url(/asset/image/bg_content1.png) left top no-repeat;
}

#content1 .content1_title {
	font-size: 2.0rem;
	line-height: 1.2em;
	color: #222;
}

#content1 .content1_lead {
	font-size: 1.25rem;
	color: #555;
}

演算しないようにする

補完を使うと、変数の値をあえて計算せずに展開できるようになります。
例えば、以下の例では「$position_y / $width」の部分で単位の異なる値を使って演算が実行されてしまいエラーが発生してしまいます。

style.scss

$position_x: 10px;
$position_y: 20px;
$width: 100%;
$height: auto;

#content1 {
	background: url(../image/pic.jpg) left $position_x top $position_y / $width $height no-repeat;
}

ここで変数を補完することで、値を計算せずに展開することができます。

style.scss

$position_x: 10px;
$position_y: 20px;
$width: 100%;
$height: auto;

#content1 {
	background: url(../image/pic.jpg) left #{$position_x} top #{$position_y} / #{$width} #{$height} no-repeat;
}

コンパイルすると以下のCSSを出力します。

style.css

#content1 {
	background: url(../image/pic.jpg) left 10px top 20px / 100% auto no-repeat;
}

補完の内側で演算を実行する

セレクタ部分で補完を使うと「セレクタ名 + 変数の値」の組み合わせでセレクタ名を作ることができます。
例えば以下のように余白用のセレクタを自動的に作ることができます。

style.scss

@for $i from 0 through 10 {

	.mgb#{5*$i} {
		margin-bottom: 5*$i + px;
	}
}

コンパイルすると以下のCSSを出力します。

style.css

.mgb0 {
	margin-bottom: 0px;
}

.mgb5 {
	margin-bottom: 5px;
}

.mgb10 {
	margin-bottom: 10px;
}

.mgb15 {
	margin-bottom: 15px;
}

.mgb20 {
	margin-bottom: 20px;
}

.mgb25 {
	margin-bottom: 25px;
}

.mgb30 {
	margin-bottom: 30px;
}

.mgb35 {
	margin-bottom: 35px;
}

.mgb40 {
	margin-bottom: 40px;
}

.mgb45 {
	margin-bottom: 45px;
}

.mgb50 {
	margin-bottom: 50px;
}

セレクタ名では補完を使っていますが、ネスト内のmargin-bottomプロパティの値を計算するときは通常の演算のため補完は使っていません。
このように補完を使うことで変数の値をどう展開するか柔軟にコントロールすることができます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。