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; } }