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

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 and selector "interpolation"，例如：

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

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

然后，根据您的需要，用其他东西进一步改进它。例如使用循环来减少重复 and/or 的可能性，从而生成任意数量的 class。见本机 Less loops and/or a syntactic sugar goodies for those like .for:

@import "for";

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

Codepen Demo 以上（稍作修改）片段。

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

How to create generic CSS class with input parameter

html

css

less