@mixinの繰り返し生成について

質問

もしかしたら仕様で出来ないのかもしれないのですが、
ご存知の方は教えてください。

ミックスインを繰り返し文を使用して自動的に生成していきたいのですが、出来るのでしょうか？
試したコードが以下です。
--------------------------
@for $i from 1 through 5 {
@mixin test#{$i}() {
.test#{$i} {
/* style */
}
}
}
--------------------------
上のコードではエラーになってしまいます。
そもそも@に対して変数を設定すること自体できないのかもしれませんが。

他に別の方法等ありましたら教えていただきたく思います。
宜しくお願いいたします。

※また、なぜmixinを自動生成するのかというと、mixinを大量に作成し、全てシングルトン構成にしたいからです。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

現状では無理なようですね。

>※また、なぜmixinを自動生成するのかというと、mixinを大量に作成し、全てシングルトン構成にしたいからです。

たぶん

@include test1;
@include test2;

という書き方をしたいということだと思いますが、

@include test(1);
@include test(2);

カッコ付の方が基本ですし、その方が汎用性がありますし、
よほどの理由がない限り、動的にmixinのIDを作る方法はサポートされないと思います。

------------------
連番のセレクタを作りたいのであれば、@includeをループさせればいいです。
引数をセレクタにすれば、子セレクタなども作れます。

@mixin test($i) {
.test#{$i} {
/* style */
}
}

@for $i from 1 through 5 {
@include test( $i );
}
@include test( " span" );

---- 出力 ----
.test1{/* style */}
.test2{/* style */}
.test3{/* style */}
.test4{/* style */}
.test5{/* style */}
.test span{/* style */}

お礼

これ以上ない様な回答ありがとうございます。

>@include test1;
>@include test2;
>という書き方をしたいということだと思いますが、

まさにこれです。

やはり現状できないのですね、

@for $i from 1 through length($colorArray) {
.back-color#{$i} {
@include backColor(#{nth($colorArray,$i)});
}
}
↑のようにしているのですが、
使うものだけクラスの生成をしたかったのです、
これだと、配列に入った値の全てのクラスを作ってしまうので・・・

なにかそれに変わるような方法の発見、もしくは機能が追加されればいいのですが。

回答No.2

神崎 渉瑠（@taloo）

>No.1お礼

よくわかりませんが、それは$colorArrayを調整すべき事ではないですかね。

でなければ@mixin backColorの中身、つまり

@mixin backColor( $colorName ){
この部分
}

で調整できると思いますが。