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

 
6.1 訂正 2018年3月5日
6.2 概要
6.3 まとめて記述

6.1 訂正 2018年3月5日

 今やこんな記事を書いたことを後悔しております。  「Autoprefixer」を使えば、こんな面倒くさいことは必要ないのです。  なので、以下は『ちゃい』です。  「Autoprefixer」を使いましょう。

6.2 概要

 本項は、下記を参考にしました。
Sassでベンダープレフィックスを自動で付与する
 .css には方言が多くて・・・。  タブサイズを指定するのに

tab-size: 4;		←	一般?
-moz-tab-size: 4;	←	Firefox?
 みたいなことを書くので、あちこちに出現する場合、2行ずつ増えていくという、効率の悪いことになるのです。

6.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;
}
 うむ、便利。