html - How to create generic CSS class with input parameter -

i showing list of items on ui. items have attribute tlevel. depending on tlevel value want create tree structure.

something this

item1                   tlevel=0     item2               tlevel=1         item3           tlevel=2         item4               tlevel=1         item5           tlevel=2             item6       tlevel=3                 item7       tlevel=3             item8       tlevel=3 item9                   tlevel=0     item10              tlevel=1     item11              tlevel=1 

html template

<div class="treelevelcss(' + tlevel + ')" /> 

css should like

.treelevelcss(tlevel){     "margin-left: " + (tlevel * 15) + "px" } 

i not sure have written above in html , css right, give idea of want achieve here.

if you're using less, need in simplest case mixin , selector "interpolation", e.g.:

.treelevel(0); .treelevel(1); .treelevel(2); .treelevel(3);  .treelevel(@level) {     .treelevelcss@{level} {         margin-left: @level * 15px;     } } 

then, depending on needs, further improved other stuff. example using loops reduce repetition and/or possibility generate arbitrary number of class. see native less loops and/or syntactic sugar goodies .for:

@import "for";  .tree-level- {     // generate 8 level classes:     .for(0, 7); .-each(@i) {         &@{i} {             margin-left: 15px * @i;         }     } } 

codepen demo above (slightly modified) snippet.