Less 的动态变量名

Question

我正在尝试使用 less 分配一些动态变量名称（第一次使用它）......但我尝试过的任何东西似乎都不起作用。在查看了所有文档之后，我想到了这个，但它仍然不起作用：

// jellybeans
@opacity: 1;

@black-jellybeans:    rgba(59,59,59,@opacity);       // #3b3b3b
@red-jellybeans:      rgb(207,106,76,@opacity);      // #cf6a4c
@green-jellybeans:    rgba(153,173,106,@opacity);    // #99ad6a
@yellow-jellybeans:   rgba(216,173,76,@opacity);     // #d8ad4c
@blue-jellybeans:     rgba(89,123,197,@opacity);     // #597bc5
@magenta-jellybeans:  rgba(160,55,176,@opacity);     // #a037b0
@cyan-jellybeans:     rgba(113,185,248,@opacity);    // #71b9f8
@white-jellybeans:    rgba(173,173,173,@opacity);    // #adadad

// the palette to use
@palette: "jellybeans";

@black:   "black-@{palette}";
@red:     "red-@{palette}";
@green:   "green-@{palette}";
@yellow:  "yellow-@{palette}";
@blue:    "blue-@{palette}";
@magenta: "magenta-@{palette}";
@cyan:    "cyan-@{palette}";
@white:   "white-@{palette}";

有什么建议吗？

Answer 1

使用：

@cyan:    "cyan-@{palette}";
p{
color: @@cyan;
}

或

    @whitename: "white-@{palette}";
    @white:   @@whitename;

    p{
    color: @white;
    }

Less 的动态变量名

Dynamic Variable Names with Less

css

less