正規表現を使ってcssを記述する

divなどの要素に複数のクラス名を付けてcssでコントロールする、という事自体は以前からやって来ましたが、クラス名が増え過ぎてしまうと、逆にコントロールし難くなってしまいます。
そういう場合に正規表現を上手に使う事でコントロールしたい要素を絞り込む事が出来ます。

<div class="box-a"></div>
<div class="box-b"></div>
<div class="box-c"></div>

クラス名の行頭を一致させる場合

div[class^="box"] {
}

クラス名の文末を一致させる場合

div[class$="◯◯"] {
}

クラス名の部分一致一致させる場合

div[class*="◯◯"] {
}

Sassのfor文を使ってループ処理する

@for $i from 1 through 8 {
    $width: percentage(1 / $i);
    .col#{$i} {
      width: $width;
    }
}