1

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?

nfarrar
  • 2,291
  • 4
  • 25
  • 33
  • It should work mate. Are you using double `@` when using the variable (like `color:@@black;`) because that needs to be done? – Harry Feb 10 '15 at 07:19
  • 1
    While this will work with `@@` of course, the question itself looks like an "XY problem", so what are you actually trying to achieve this way? (for instance if you want to switch between different themes in the same file you don't need to append "a theme" suffix or whatever to all those variables, there're more clean and less tedious methods for that). – seven-phases-max Feb 10 '15 at 08:51
  • @Harry Thanks, I was not. Tested it and you are correct. – nfarrar Feb 10 '15 at 15:04
  • @nfarrar: Glad to know that :) I would recommend you to have a look at seven-phases-max's comment also. – Harry Feb 10 '15 at 15:09
  • @seven-phases-max I'm not a web developer and (obviously) have never used less before - I have no idea what I'm doing (or best practices on how things should be done). I was trying to set up an easy way to swap colors, fonts, icons, etc. in and out while I'm playing around. If you have any suggestions (or can point me to good reading) on things I should know or ways to do this better, I'm all ears. :) – nfarrar Feb 10 '15 at 15:09
  • This is what I made last night: https://gist.github.com/nfarrar/a76102df56f17e7cffa6. I'm using this in conjunction with purecss (learning it at the same time) and attempting to build a simple theme for pelican. – nfarrar Feb 10 '15 at 15:14
  • Usually the most often used method is to put your different themes to different files and simply switch the import of such theme file. But if you still need to keep everything in the same file you can put theme variables into different mixins and switch between those by expanding the corresponding one. Something like [this](https://gist.github.com/seven-phases-max/92531212a4cb365539ae#file-28426067-less) (details may vary). – seven-phases-max Feb 10 '15 at 16:44

1 Answers1

4

use:

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

or

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

    p{
    color: @white;
    }
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224