Blog気になるコト

2016年12月12日 月曜日 投稿者:丹羽 岳人

Sass mixinの引数に0を指定する方法

背景画像をカラムごとに違う画像を配置するため、mixinを使って設定しましたが、うまくいきませんでした。
ちなみに背景画像は
bg01.png
bg02.png
bg03.png



と連番で作っています。
まず、下記のように普通に書いてみると、

@mixin bgSet($numset:01) {
	background: url(../images/bg#{$numset}.png) no-repeat left top;
}

#bg01 {
		@include bgSet(01)
	}

出力結果は下記のように01になって欲しいとことが1となってしまいました。。。

#bg01 {
		background: url(../images/bg1.png) no-repeat left top;
	}

これを回避するために下記のように記述したら狙い通りの出力結果を得ることができました。

@mixin bgSet($numset:"01") {
	background: url(../images/bg#{$numset}.png) no-repeat left top;
}

#bg01 {
		@include bgSet("01")
	}

引数の値のところに”(ダブルコーテーション)を入れてあげると解決!

ちなみにSassのバージョンは3.4.22です。