Less 具有较少

使用SASS，您可以创建如下变量数组：

$badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d, dark-red #b5473e, black #666, cyan #81BABD, purple #AEA7CF;

有没有办法用更少的颜色创建数组？

//将颜色定义为变量
// DEFINE COLORS AS VARIABLES TO BETTER HANDLE
@blue: #7FB3D4;
@gray: #767676;
@green #8CC079;
@red #b35d5d;
@dark-red: #b5473e;
@black: #666;
@cyan: #81BABD;
@purple: #AEA7CF;

// CREATE ARRAY
@badge-colors: '@{blue}','@{gray}','@{green}','@{red}','@{dark-red}','@{black}','@{cyan}','@{purple}';
// SAVE YOUR ARRAY LENGTH
@howmany: length(@|badge-colors);

// LOOP THROUGH THEM, SEE: https://gist.github.com/juanbrujo
.loop (@index) when (@index > 0){
    // CLEAN EACH COLOR NAME
    @color: e(extract(@badge-colors, @index));
    // USE EACH COLOR
    element{
      color: @color;
    }
    .loop (@index - 1);
}
.loop(0){}
// KEEP LOOPING
.loop(@howmany);
// END

@蓝色：#0000FF；
@绿色：#00FF00；
@红色：#FF0000；
@黄色：#FFFF00；
//创建数组
@徽章颜色名称：“蓝色”、“绿色”、“红色”、“黄色”；
@徽章颜色：“{blue}”、“green}”、“red}”、“yellow}”；
//混合
.制作徽章颜色（@徽章颜色名称，@徽章颜色）{
.徽章颜色（@index）何时（@index=<长度（@badge colors））{
@名称：摘录（@badge color name，@index）；
@值：提取（@badge colors，@index）；
@项目：~“.badge-@{name}”；
@{item}{
颜色：颜色（@value）！重要；
}
.徽章颜色（@index+1）；
}
.徽章颜色（1）；
}
//创造
.制作徽章颜色（@徽章颜色名称，@徽章颜色）；
//编译输出
.徽章蓝色{
颜色：#0000FF！重要；
}
.绿色徽章{
颜色：#00FF00！重要；
}
.徽章红色{
颜色：#FF0000！重要；
}
.徽章黄色{
颜色：#FFFF00！重要；
}

问题的答案是“是的，您可以用更少的时间创建和使用数组”。数组（在CSS中，通常称为“列表”的领域较少）的定义代码与Q中的代码相同：

@badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d;

• 有关帮助您迭代此类列表/数组并访问其项的函数，请参阅
• 有关Less列表的某些高级/不太明显的属性，请参见
• 另外，有关典型的列表/数组/贴图操纵功能和特性，请参见

---

使用较少数组的一个典型介绍性示例是一个代码片段，用于迭代简单颜色列表（via）以创建相应的CSS类：

@颜色：蓝色、绿色、黄色、红色；
//mixin迭代颜色并为每个颜色创建CSS类
.在（@i>0）时创建颜色类（@i:length（@colors））{
.制作颜色等级（@i-1）；
@颜色：提取（@colors，@i）；
.@{color}{
颜色：@颜色；
}
}
.make-color-classes（）；//运行混音器

---

第二个例子是第一个例子的更实际的版本。从“二维”列表（在本例中是键/值数组的简单等价物，即“映射”）创建类似于问题数组的“自定义颜色”类

使用“现代更少”（通过

Less插件列表
语句）：


“Legacy Less”（使用递归混合）中的相同示例：


最后，对于更具体的数组/列表使用示例，请毫不犹豫地从下面的基本查询开始：




等等
只需将
$
更改为
@
，就可以得到更少的数组。也可以看到相应的不太完美-唯一的问题是Visual Studio将“蓝色”键检测为颜色，并在其旁边绘制一个小正方形-有没有一个好的方法来解决这个问题？这是不言而喻的，无论开发人员想用什么，代码都会被注释。（这个答案完全是为了推出之前答案中过于夸张和可怕的例子（对于这样一个简单而极简的问题）。这个答案做得好。谢谢！你能在这里评论或解释一下.iter的工作原理吗？它看起来像
.iter（length（@list））
设置一个函数来保存当前迭代值。但是我对使用较少的语法感到有点困惑。@Metropolis
。iter（length（@list））
以起始索引作为参数调用mixin（mixin基本上从n（列表中的项目计数）迭代到0）。有关更多详细信息，请参阅（尤其是）。mixin定义在
.iter（length（@list））；
行的正下方。
.iter（@i）{…}
-就是这个（请参阅我前面的注释）。
@badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d;

@badge-colors: 
    blue  #44BBFF,
    gray  #F0F1F5,
    green #66CC99,
    red   #FC575E;

.for-each(@pair in @badge-colors) {
    @key: at(@pair, 1);
    .badge-@{key} {
        color: at(@pair, 2);
    }
}

// usage:

@badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d;

.make-classes(badge, @badge-colors);

// impl.:

.make-classes(@prefix, @list) {
    .iter(length(@list));
    .iter(@i) when (@i > 0) {
        .iter(@i - 1);
        @pair:  extract(@list, @i); 
        @key:   extract(@pair, 1);
        @value: extract(@pair, 2); 
        .@{prefix}-@{key} {
            color: @value;  
        }
    }
}