Sassのループ処理の出力結果を複数セレクタ指定の状態にする方法

実現したいこと

Sassのループ処理によって出力(コンパイル)された結果を、複数セレクタ指定の状態にして無駄をなくしたい。

前提

npmの(dart)sassを使用してコンパイルしています。

対象のソースコード(例)

@for $i from 1 through 100 { .sample--#{$i}{ display : block ; } }

上記のような指定でコンパイルすると

.sample--1{ display : block ; } .sample--2{ display : block ; } .sample--3{ display : block ; } .sample--4{ display : block ; } .sample--5{ display : block ; } ・ ・ ・ 以下略

という出力になりますが、プロパティの指定が重複して無駄が多いと感じています。

そこで下記のような出力をしたいのですが、どのようにすればよいか適切な解決方法が見つかりません。

.sample--1, .sample--2, .sample--3, .sample--4, .sample--5{ display : block ; }

何か良い案をご存知の方がいらっしゃいましたらご助言いただきたいです。
そもそもそういった出力は無理(フルスクラッチするしかない)のであればあきらめます。

よろしくお願いいたします。

コメントを投稿

0 コメント