css - 如何在 LESS 的变量中拥有变量名？

Question

我有这个代码片段：

// Color settings 
.setCat(@x) {
    .cat@{x} {
        .menu-link {
            &.selected, &:hover { background: ~@{"catColor@{x}"}; }
            &:hover:after { border-top-color: ~@{"catColor@{x}"}; }
            &:only-child:after { border-top-color: transparent; }
        }
        .menu-link-submenu { background: ~@{"catColor@{x}"}; }
    }
}

.setCat(1);

我希望你能看到我想要做什么。我想要 @catColor1 输出，然后 LESS 将编译为存储在该变量中的我的十六进制颜色。

这可能吗？有没有更好的办法？

Answer 1

您需要将两个调用都嵌套到字符串中。我已经使处理全部通过一个新变量useColor（您不必这样做，我只是认为它看起来更干净）：

.setCat(@x) {
    .cat@{x} {
        @useColor: ~"@{catColor@{x}}";
        .menu-link {
            &.selected, &:hover { background: @useColor; }
            &:hover:after { border-top-color: @useColor; }
            &:only-child:after { border-top-color: transparent; }
        }
        .menu-link-submenu { background: @useColor; }
    }
}

所以假设这个 LESS：

@catColor1: #fff;
@catColor2: #aaa;

.setCat(1);
.setCat(2);

产生这个 CSS：

.cat1 .menu-link.selected,
.cat1 .menu-link:hover {
  background: #ffffff;
}
.cat1 .menu-link:hover:after {
  border-top-color: #ffffff;
}
.cat1 .menu-link:only-child:after {
  border-top-color: transparent;
}
.cat1 .menu-link-submenu {
  background: #ffffff;
}
.cat2 .menu-link.selected,
.cat2 .menu-link:hover {
  background: #aaaaaa;
}
.cat2 .menu-link:hover:after {
  border-top-color: #aaaaaa;
}
.cat2 .menu-link:only-child:after {
  border-top-color: transparent;
}
.cat2 .menu-link-submenu {
  background: #aaaaaa;
}