LESS-Schleifen zum Generieren von Spaltenklassen in Twitter - Wie funktionieren sie?
Bootstrap verwendet einige WENIGER Mixins, um es zu generierenSäule Klassen (und mehrere andere Klassen);
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
Ich kann sehen, dassWENIGER Mixin Wachen werden verwendet, um Schleifen zu erstellen, und ich kann die Codebeispiele verstehen, die in derWENIGER Dokumentation;
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}
Aber ich kann nicht genau sagen, wie die komplexeren geschachtelten Guard-Ausdrücke funktionieren, die Bootstrap verwendet. Könnte jemand den obigen Bootstrap-Code etwas genauer kommentieren, um mir einen Hinweis darauf zu geben, was los ist?