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になって欲しいとことが１となってしまいました。。。

#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です。