twitter bootstrap - Less CSS - access part of class name and use in mixin -
in less, possible access part of class name , use within mixin?
this best explained example:
i have grid have declared follows:
.columns (@columns) { //code here generate column widths } //this problem is: .column-1 { .col (1) } .column-2 { .col (2) } .column-3 { .col (3) } // etc etc
obviously there lot of repetitive code going on here. ideally able not have declare column-1 column-2 etc , have way, regex perhaps, of parsing class name, , using value after dash automatically calculate column width. twitter bootstrap doing similar cant understand it:
.spanx (@index) when (@index > 0) { (~".span@{index}") { .span(@index); } .spanx(@index - 1); } .spanx (0) {}
i think you'll understand :
.columnx (@index) when (@index > 0) { // guarded mixin: use mixin when condition true (like if statement) (~".column-@{index}") { // outputs .column-0 class name .col(@index); // contents, use col mixin } // class doing .columnx(@index - 1); // recursive call same mixin, going down 1 } .columnx (0) {} // default implementation when .columnx(0) called, matching mixin found. .col (@index) { // actual css applied column-1 if @index 1 width: @index * 10px; // example } .columnx(3); // number of columns want
edit (missed ;
of .columnx(3);
) edit added more comments
all should give result :
.column-3 { width: 30px; } .column-2 { width: 20px; } .column-1 { width: 10px; }
Comments
Post a Comment