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

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c# - Copy ObservableCollection to another ObservableCollection -

All overlapping substrings matching a java regex -