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みたいなのを書いた。

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

@mixin addPrefix($property, $value) {
  $property: unquote($property);
  $value: unquote($value);
  @for $i from 1 through length($use)/2 {
    $n: $i * 2;
    $propIndex: $n - 1;
    @if nth($use, $n) {
      #{nth($use, $propIndex) + $property}: $value;
    }
  }
  #{$property}: $value;
}

これはmixinの中で呼ぶmixinで、（そのまま呼んでもいいけど

@mixin border-radius($value) {
  @include addPrefix('border-radius', $value);
}

こういう風にborder-radiusのmixinを書くと

.hoge {
  @include border-radius('5px');
}

これが

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

こうなる。

で、これだけでもよかったけど、プロパティによっては不要なやつ吐き出したくない場合もあるし、ついでにもうひとつ引数用意して、このmixinの中ではデフォルトでverdor prefixをfalseにできるよみたいな!important的なprefix設定を書けるように変える。

@mixin border-radius($value) {
  // この部分
  $def:
    -webkit-, false;
  @mixin('border-radius', $value, $def);
}

こうすると、-webkit-が消える（あくまでも例

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

最後に$defを渡して、それがあればそっちで上書きするように変える

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

@mixin addPrefix($property, $value, $def: false) {
  $property: unquote($property);
  $value: unquote($value);
  @for $i from 1 through length($use)/2 {
    $n: $i * 2;
    $flg: nth($use, $n);
    $prfx: nth($use, $n - 1);
    @if $def {
      $_index: index($def, $prfx);
      @if $_index {
        $flg: nth($def, $_index + 1);
      }
    }
    @if $flg {
      #{$prfx + $property}: $value;
    }
  }
  #{$property}: $value;
}

こうしとけば

@mixin box-shadow($value) {
  $def:
    -webkit-, false,
    -ms-, true;
  @include addPrefix('box-shadow', $value, $def);
}

@mixin background-size($value) {
  @include addPrefix('background-size', $value);
}

こんなmixinがあったときに（例えです

.hoge {
  @include box-shadow('0 0 0 #000');
  @include background-size('12px 12px');
}

は

.hoge {
  -moz-box-shadow: 0 0 0 #000;
  -o-box-shadow: 0 0 0 #000;
  -ms-box-shadow: 0 0 0 #000;
  box-shadow: 0 0 0 #000;
  -webkit-background-size: 12px 12px;
  -moz-background-size: 12px 12px;
  -o-background-size: 12px 12px;
  background-size: 12px 12px;
}

こうなる。サンプルを適当に書きすぎた。。。。