Sassでループ処理(each)を使う

定形の処理を繰り返したい場合、配列とeachの処理を使うと便利です。

Sass

// ベンダープレフィックスの形式を配列に格納
$arrayPrefix: -webkit-, -moz-, -o-, null;

.box {
    //arrayPrefixに収まっている値を1つprefixに取り出して処理
    @each $prefix in $arrayPrefix {
        #{$prefix}background-size: 100px 50px;
    }
}

CSS

.box {
  -webkit-background-size: 100px 50px;
  -moz-background-size: 100px 50px;
  -o-background-size: 100px 50px;
  background-size: 100px 50px;
}

今回はベンダープレイフィックスの利用が分かりやすかったので例にしましたが、他にも応用は可能だと思います。