0

時間の経過とともにさらに必要になると判断した場合に備えて、スタイルシート用に各クラスを作成せずに10個のクラスを作成できるようにしたいと考えています。私は明らかにこれが正しくなく、私が間違っていることについて助けが必要です。

@mixin ladders($num) {
 @for $num from 1 to 10 {
  .ladder-#{$num} {
    border: 1px solid #000;
  }
 }
}

私は参考資料を調べましたが、それでもすべてをまとめるという全体的な概念を理解するのに苦労しました。

ご協力ありがとうございました。

4

1 に答える 1

0

まず第一に、for ループ for をハードコーディングしたため1 to 10(10 を除く)、ミックスインは常に 9 つのクラスを生成します。次のように記述する必要があります。

@mixin ladders($num) {
    @for $i from 1 through $num {
        .ladder-#{$i} {
            border: 1px solid #000;
        }
    }
}

次に、どこかでそれを呼び出す必要があります。それが必要ない場合は、セレクター内にある必要はありません。

@include ladders(5);

出力：

.ladder-1 {
  border: 1px solid black;
}

.ladder-2 {
  border: 1px solid black;
}

.ladder-3 {
  border: 1px solid black;
}

.ladder-4 {
  border: 1px solid black;
}

.ladder-5 {
  border: 1px solid black;
}
于 2013-03-07T20:25:51.187 に答える