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

!defaultフラグについて

2014年3月3日 / category : reference-sass, sass

Sassには、!defaultフラグと呼ばれる機能があります。
正直、うまい使い方がわかっていませんが、使い方のみ紹介したいと思います。
機能としては、!defaultを使用することで、もし、設定前に変数が定義されていた場合は、そちらを優先する、という機能です。

!defaultを使用した参考例

Sass
$fontSize: 14;

.font{

	//$fontSize変数はすでに定義されているので、優先されない
	$fontSize: 10 !default;

	font-size: $fontSize + px;

}

.margin{

	//$marginはここでしか定義されていないため、優先される
	$margin: 12 !default; 

	margin:$margin + px;

}
CSS – コンパイル後
.font {
	font-size: 14px;
}

.margin {
	margin: 12px;
}