Less 用更少的时间从值列表生成CSS类

我有一个较少的循环，它生成不同的CSS（增量）类，从列表中提取颜色值

我当前的LESS代码如下：

。生成分离（#f00，#0f0，#00f）；
.生成分离（@colors…）
{
.生成分离的循环（1，@颜色）；
}
。在（@i.toolbar>.drag-controls\u container>时生成分离的循环（@i；@colors）。拖动控制：在
{
盒影：嵌入0px 0px 5px 1px@颜色；
}
}
.生成分离的循环（@i+1），@colors）；
}

生成的CSS代码是：

.detached-1{
盒影：插入0px 0px 8px 2px#f00；
}
.detached-1>.toolbar>.drag-controls\u container>。拖动控件：之前{
盒影：插入0px 0px 5px 1px#f00；
}
.1-2{
盒影：插入0px 0px 8px 2px#0f0；
}
.detached-2>.toolbar>.drag-controls\u container>。拖动控件：之前{
盒影：插入0px 0px 5px 1px#0f0；
}
.3-3{
盒影：插入0px 0px 8px 2px#00f；
}
.detached-3>.toolbar>.drag-controls\u container>。拖动控件：之前{
盒影：插图0px 0px 5px 1px#00f；
}

也许我使用的是旧的较少的结构，实际上存在一些新的技术，或者总体来说……您有什么想法来改进解决方案吗？

更多的是关于您对现有语言功能的知识和理解，而不是关于语言功能本身

也就是说，即使在更少的v2（您可能正在使用）中，也很难证明存在4行额外的

。生成分离（@colors…

混合）

例如，为什么不：

@分离颜色：#f00#0f0#00f；
.detached循环（@i:length（@detached colors））何时（@i>0）{
.分离回路（@i-1）；
.detached-@{i}{
@c：提取（@i）；
盒影：嵌入0px 0px 8px 2px@c；
>.toolbar>.drag-controls\u container>。拖动控件：之前{
盒影：嵌入0px 0px 5px 1px@c；
}
}
}.分离回路；

或：

。使分离（#f00#0f0#00f）；
.当（@i>0）时，使分离（@colors，@i:length（@colors））{
.使分离（@colors，@i-1）；
.detached-@{i}{
@c：提取（@colors，@i）；
盒影：嵌入0px 0px 8px 2px@c；
>.toolbar>.drag-controls\u container>。拖动控件：之前{
盒影：嵌入0px 0px 5px 1px@c；
}
}
}

?

---

更少的v3具有

每个
功能：

每个（#f00#0f0#00f{
.detached-@{index}{
方框阴影：插入0px 0px 8px 2px@值；
>.toolbar>.drag-controls\u container>。拖动控件：之前{
框阴影：插入0px 0px 5px 1px@值；
}
}
});


但对于更少的v2来说，作为一个插件也存在类似的情况：

。对于每个（@c，@i在@l:#f00#0f0#00f中）{
.detached-@{i}{
盒影：嵌入0px 0px 8px 2px@c；
>.toolbar>.drag-controls\u container>。拖动控件：之前{
盒影：嵌入0px 0px 5px 1px@c；
}
}
}
您想解决什么问题？您只是想问这是否是一个好的解决方案吗？我知道它运行正常，但它非常冗长，有点不可读。我想，LESS的上一个版本中可能有一些新功能，可以通过更紧凑的代码或更直观的方式实现相同的结果（一个例子可以是新的
if（）
语句，而不是旧的
when（）
guards）一个例子可以是新的if（）语句，而不是旧的when（）guards-如果你的意思是Less v3中的
if
函数并不能替代when
guards。我从[类似的问题解决方案]开始开发此代码。无论如何，第一个解决方案运行正常，但值存储在映射中？第二个解决方案有一些错误，因为它还打印“颜色”或“提取（颜色）”（至少尝试使用[）.v3版本非常好且紧凑，唯一的问题是无法将循环定义与值声明分离。我看到，可以对每个声明分离颜色的版本更改一点v3:#f00#0f0#00f；

，然后将每个定义替换为

每个（@detached colors，{

真的不错。剩下的一个问题是，它是如何工作的

@分离颜色的不同值的定义：#f00#0f0#00f；

？我也尝试过删除空格，它继续工作，所以分隔值的不是空格的存在……我不明白它是什么样的构造，我也找不到它关于它在官方的一篇文章中的解释关于分离的颜色：#f00#0f0#00f；-我故意没有使用变量（除了示例2），只是因为你没有在你的代码片段中（因此

。生成分离的（#f00，#0f0，#00f）

->

每个（#f00#0f0#0f0#00f…

。

）值（一般来说，逗号列表和空格列表之间没有什么重要区别（不包括func arg list等上下文相关约定）。我还尝试删除空格，但它仍能继续工作-不要依赖于此-在这种特殊情况下，只能使用空格，因为
#
本身是一个不含糊的分隔符（因此，空间被自动假定为压缩CSS中的空间）-但通常情况下，空间必须在那里（好吧，假设您要编写人类可读的代码）。