html - 如何在 LESS CSS 中使用动态类名并将它们用作函数中的值

Question

我想像这样为另一个类生成灵活的颜色类，而不是将它们全部写在 LESS 上作为变量:

.link.color-green{
color:green;
}
.link.color-red{
color:red;
}

.link.color-cccccc{
color:#cccccc;
}

.link.color-FFF8DC{
color:#FFF8DC;
}

也许是这样的？但编译器说错误:
NameError:变量@colorNameOrHexaCode 未定义

.link{
      .color-@{colorNameOrHexaCode} {

                    color: rgb(@colorNameOrHexaCode);

        }; 
}

抱歉，我不确定如何为此创建循环或函数。

Answer 1

在创建循环之前，您必须先创建一个颜色列表:

.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}.color-@{key} {
            color: @value;  
        }
    }
}

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

.make-classes(link, @colors);

输出:

.link.color-blue {
  color: #7fb3d4;
}
.link.color-gray {
  color: #767676;
}
.link.color-green {
  color: #8cc079;
}
.link.color-red {
  color: #b35d5d;
}