如何创建与输入参数通用的CSS类(How to create generic CSS class w

我显示的UI的产品清单。 这些项目有属性作为tLevel。 根据tLevel价值，我想创建树结构。

像这样的事情

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模板

<div class="treeLevelCSS(' + tLevel + ')" />

CSS应该是这样的

.treeLevelCSS(tLevel){
    "margin-left: " + (tLevel * 15) + "px"
}

我不知道我在HTML写了上面和CSS是正确的，但只给了什么我想在这里实现的想法。

Answer 1:

如果您使用的少，你在一个简单的情况下需要的是一个混入 ，并选择“插入” ，例如：

.treeLevel(0);
.treeLevel(1);
.treeLevel(2);
.treeLevel(3);

.treeLevel(@level) {
    .treeLevelCSS@{level} {
        margin-left: @level * 15px;
    }
}

然后，根据您的需要，把它与其他的东西进一步提高。 例如使用循环，以减少重复和/或可能性，以产生类的任意数量。 看到当地较少的循环和/或用于那些语法糖好吃的东西一样.for ：

@import "for";

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

Codepen演示对于上述（略有修改）代码段。

Answer 2:

如果可能的话，可能是有益的在这里使用嵌套列表，只有具有适用于它填充每个级别。

例如：

<ul>
  <li>1</li>
  <li>
    <ul>
      <li>2</li>
      <li>
        <ul>
          <li>3</li>
        </ul>
      </li>
      <li>2</li>
    </ul>
  </li>
  <li>1</li>
</ul>

和...

li {
  list-style:none;
}
ul ul {
  padding-left:20px;
}

应该做的工作，演示： http://codepen.io/merlinmason/pen/vORaVB

文章来源: How to create generic CSS class with input parameter