CODEWITHSUNDEEP
cssless
nfarrar
nfarrar

Reputation: 2371

Dynamic Variable Names with Less

I'm trying to assign some dynamic variable names using less (using it for the first time) ... but nothing I've tried seems to work. After looking through all the documentation, I came up with this, but it's still not working:

// 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}";

Any suggestions?

Upvotes: 1

Views: 962

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

use:

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

or

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

    p{
    color: @white;
    }

Upvotes: 4

Related Questions