もしかしたら仕様で出来ないのかもしれないのですが、
ご存知の方は教えてください。
ミックスインを繰り返し文を使用して自動的に生成していきたいのですが、出来るのでしょうか?
試したコードが以下です。
--------------------------
@for $i from 1 through 5 {
@mixin test#{$i}() {
.test#{$i} {
/* style */
}
}
}
--------------------------
上のコードではエラーになってしまいます。
そもそも@に対して変数を設定すること自体できないのかもしれませんが。
他に別の方法等ありましたら教えていただきたく思います。
宜しくお願いいたします。
※また、なぜmixinを自動生成するのかというと、mixinを大量に作成し、全てシングルトン構成にしたいからです。
No.1ベストアンサー
- 回答日時:
現状では無理なようですね。
>※また、なぜ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
- 回答日時:
>No.1お礼
よくわかりませんが、それは$colorArrayを調整すべき事ではないですかね。
でなければ@mixin backColorの中身、つまり
@mixin backColor( $colorName ){
この部分
}
で調整できると思いますが。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) EXCELの外部データ取得ができない 1 2023/03/23 09:03
- Visual Basic(VBA) VBAでのMATCH関数 3 2022/10/17 19:06
- その他(プログラミング・Web制作) google formsを使ったタスク依頼フォーム作成におけるご相談 1 2023/06/22 15:55
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- その他(プログラミング・Web制作) python OpenPyXLを使って出力結果をエクセルに書き込み 2 2022/06/04 19:46
- Visual Basic(VBA) EXCEL VBAにて動的にCheckBOXを複数作成し、同BOXにイベントを追加したい 1 2023/03/16 07:05
- 労働相談 合意済み仕様の商品納入後における仕様変更要求への対応について 5 2023/04/19 09:41
- 画像編集・動画編集・音楽編集 動画をディスク作成すると画像が乱れる。 4 2022/06/24 07:49
- プリンタ・スキャナー キャノンmp490プリンター【エラー番号5400】で【プリンタートラブルが発生しました。電源を入れ直 2 2023/07/24 17:45
- その他(開発・運用・管理) フォルダの中にファルダを作成してファイルを格納するバッチコマンド 1 2022/06/30 11:39
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idの中のid指定
-
外部css定義したclassをht...
-
個別にリンクの色を変える方法
-
CSSの足し算の意味は?
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
透過背景を解除するにはどうす...
-
CSSで下まで背景色を伸ばす方法
-
htmlのid属性って必要なの?
-
webサイト印刷時に特定の画像を...
-
CSSに同じclass名がいっぱい‥。...
-
CSS, リンクの色を一部変えるに...
-
CSSのクラス名・ID名の指定でワ...
-
FC2掲示板をトピック一覧表示型...
-
スタイルシートで、id属性の中...
-
サイトにjQueryが使用されてい...
-
p要素にclassとspanでclass適応...
-
htmlの文字が縦書きになる
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
htmlのid属性って必要なの?
-
最近、HTMLのヘッダーをIDで定...
-
HTML要素のid/class名の長さに...
-
CSSに同じclass名がいっぱい‥。...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
サイトにjQueryが使用されてい...
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
透過背景を解除するにはどうす...
-
<span>で2重にかけているものを...
-
idの中のid指定
-
display:table-cell内でこんな...
-
CSSが効かずどのように指定すれ...
-
スタイルシートで、id属性の中...
-
【VBA/HTML】IE画面内のページT...
-
brにクラスをつけてcssでdispla...
-
外部css定義したclassをht...
-
CSS内で使われる山括弧の意味が...
おすすめ情報