吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

変数の定義と使い方

2014年2月26日 / category : reference-sass, sass

Sassでは、「変数」を使用することができます。「変数」は「$」を頭につけて定義します。

Sass
$linkColor: #ff0000;
$fontFamily: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
$fontSize: 24;

.link{
	color: $linkColor;
}

.txt{
	font-family: $fontFamily;
}

.large{
	font-size: $fontSize + px;
}
CSS – コンパイル後
.link {
  color: red;
}

.txt {
  font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

.large {
  font-size: 24px;
}

「変数」のスコープについてですが、{~}(波括弧)の中で宣言した場合は、その括弧内がスコープとなります。

Sass
div{
	$value: 300;
	width: $value + px;
	p{
		width: $value + px;
	}
}

/* ↓ ここで使用している$valueは使えません。 */
p{
	width: $value + px;
}
CSS – コンパイル後
div {
  width: 300px;
}
div p {
  width: 300px;
}

外部から読み込んだ「変数」は使用することができます。

Sass(_config.scss)
$fontSize: 12;
Sass
@import '_config';

p{
	font-size: $fontSize + px;
	span{
		font-size: $fontSize + px;
	}
}
CSS – コンパイル後
p {
  font-size: 12px;
}
p span {
  font-size: 12px;
}

ルートに「変数」を宣言し、{~}(波括弧)内に同じ変数名で「変数」を宣言するとルートで宣言した「変数」に値が差し換えられてしまう現象が起こってしまいます。

Sass
$value: 300;

div{
	width: $value + px;
	$value: 150;
	p{
		width: $value + px;
	}
}

p{
	width: $value + px;
}
CSS – コンパイル後
div {
  width: 300px;
}
div p {
  width: 150px;
}

p {
  width: 150px; //$valueの値が差し替えられた
}