动态变量名称少

时间:2015-02-10 07:16:09

标签: css less

我正在尝试使用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}";

有什么建议吗?

1 个答案:

答案 0 :(得分:3)

使用:

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

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

    p{
    color: @white;
    }