Question

我在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

如果可能的话，在这里使用嵌套列表可能是有益的，每个级别都应用了填充。

例如：

<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

Answer 2

如果您使用的是Less，那么在最简单的情况下您需要的是mixin和selector "interpolation"，例如：

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

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

然后，根据您的需要，使用其他东西进一步改进。例如，使用循环来减少重复和/或生成任意数量的类的可能性。查看原文Less loops和/或类似.for的语法糖好吃的东西：

@import "for";

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

Codepen Demo以上（稍加修改）代码段。

如何使用输入参数创建通用CSS类

2 个答案: