如何使用输入参数创建通用CSS类 [英] How to create generic CSS class with input parameter

问题描述

我正在显示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应该类似于

<$ p $ （tLevel）{
margin-left：+（tLevel * 15）+px
}
> .treeLevelCSS

我不确定我在HTML和CSS中所写的内容是否正确，只是为了说明我想在这里实现的目标。如果你使用Less，最简单的情况是你需要一个 org / features /＃mixins-parametric-featurerel =nofollow> mixin and 选择器插值，例如：



  .treeLevel（0）; 
 .treeLevel（1）; 
 .treeLevel（2）; 
 .treeLevel（3）; 
 
 .treeLevel（@level）{
 .treeLevelCSS @ {level} {
 margin-left：@level * 15px; 
 
 
  

然后，根据您的需要，进一步改进与其他东西。例如使用循环来减少重复和/或产生任意数量的类的可能性。查看原生循环和/或针对像 .for ：

  @importfor; 
 
 .tree-level- {
 //生成8个关卡类别：
 .for（0，7）; 。-each（@i）{
& @ {i} {
 margin-left：15px * @i; 
} 
} 
} 
  

Codepen Demo 上面的（略有修改）片段。

I am showing list of items on UI. Those items have attribute as tLevel. Depending on tLevel value I want to create tree structure.

Something like 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 be something like

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

I am not sure what I have written above in HTML and CSS is right, but just to give an idea of what I want to achieve here.

解决方案

If you're using Less, what you need in a simplest case is a mixin and selector "interpolation", e.g.:

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

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

Then, depending on your needs, get it further improved with other stuff. For example using loops to reduce repetition and/or possibility to generate an arbitrary number of class. See native 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 for above (slightly modified) snippet.

这篇关于如何使用输入参数创建通用CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！