HTML - SCSS - プレフィックスを自動付与

1.　訂正 2018年3月5日

2.　概要

3.　まとめて記述

1.　訂正	2018年3月5日

　今やこんな記事を書いたことを後悔しております。

　「Autoprefixer」を使えば、こんな面倒くさいことは必要ないのです。

　なので、以下は『ちゃい』です。

　「Autoprefixer」を使いましょう。

2.　概要

　本項は、下記を参考にしました。

「Sassでベンダープレフィックスを自動で付与する」


　.css には方言が多くて・・・。
　タブサイズを指定するのに


tab-size: 4;		←	一般？
-moz-tab-size: 4;	←	Firefox？


　みたいなことを書くので、あちこちに出現する場合、２行ずつ増えていくという、効率の悪いことになるのです。

3.　まとめて記述

　.scss ではこれをまとめて記述できるようで・・・。


$set-prefix: '' , -moz-;

@mixin propertySetPrefix($name, $value)
{
	@each $prefix in $set-prefix
	{
		#{$prefix}#{$name}: $value;
	}
}

div.tab4
{
	@include propertySetPrefix(tab-size, 4);
}


　と書いておけば、コンパイル後の .css には、下記のように展開されます。


div.tab4 {
  tab-size: 4;
  -moz-tab-size: 4;
}


　うむ、便利。