css - 遍历具有复合名称的变量

Question

我在这里做错了什么？

我在做什么:

正文{

&.green {
    h1, h2, h3, h4, h5 {
        color: @color-green;
    }
}

我正在尝试做的事情:

@color-green: #1ED261;

正文{

@colors: green, red, blue;

.for-each(@color-name in @colors) {

    &.@{color-name} {
        h1, h2, h3, h4, h5 {
            color: @color-@color-name; << IS THIS THE PROBLEM?
    }
}

Answer 1

您可以创建一个变量，从循环变量中创建和存储字符串，如 color-green。下面是相同的示例代码。

@color-green: #1ED261;
@color-red: #D22A1E;
@color-blue: #1E84D2;

body {
  @colors: green, red, blue;

  each(@colors, {
    &.@{value} {
      h1, h2, h3, h4, h5 {
        @color: %('color-%s', @value); //This creates and stores the variable name we will need in next step
        color1: @@color; //use that variable 
      }
    }
  });
}