5509

Sassで使うprefixを連想配列ぽいやつで指定して必要なプロパティを吐き出す

タイトルがカオス・・・下みたいな各vendor prefixを使うか使わんかみたいな連想配列ぽい配列を定義しておくと、trueのvendor prefixが付いたプロパティだけを吐き出すようなやつがほしかった

$use:
  -webkit-, true,
  -moz-, true,
  -o-, true,
  -ms-, true;

// 本当はこうしたいけど
$use: {
  '-webkit-': true,
  '-moz-': true,
  '-o-': true,
  '-ms-': true
}

全部trueのときは例えばborder-radiusだと

.hoge {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radisu: 5px;
  border-radius: 5px;
}

みたいな。falseにしたらそれに対応するprefixが出力されなくなる、みたいな。全部のmixinに書けばそれで終わりだけど、そんなの面倒くさいし、vendor prefixを付けたプロパティを出力するmixinみたいなのを書いた。

Read more

Author

nori
nori
- UI Engineer
Location
- ,