0

I have the following code:

@red_SOPRA: orange;
@red: red;
.gradient(@color) when (@color = red)
{
  background: linear-gradient( 180deg, @color 0%,yellow 100%);
}

div
{
  .gradient(red);
}

Compiled into:

div {
  background: linear-gradient(180deg, #ff0000 0%, #ffff00 100%);
}

I would like to add "_SOPRA" to the end of variable "@color" present in background definition, in order to obtain an interpolated and dynamic name of variable used in mixin.

I tried with @@ and @{color} definitions but without success.

How to obtain a generated background like this (with value "#ffa500" - @red_SOPRA value - instead of "#ff0000")?

div {
  background: linear-gradient(180deg, #ffa500 0%, #ffff00 100%);
}
3
  • wont this do: .gradient(@red_SOPRA); ?
    – Danield
    Jun 25, 2014 at 10:08
  • Because I'll have also "@blu_SOPRA".... I need to have a "dynamic" name.... practically, color value used in gradient definition should be a "merging" between string passed through @color variable and "_SOPRA" one Jun 25, 2014 at 10:12
  • In current Less versions the standard colour keywords (e.g. red) are immediately converted to their hex representation (e.g. #ff0000) so "@{color}" would actually be expanded into "#ff0000" (so instead of red_SOPRA you get #ff0000_SOPRA). To prevent this you have to use red with quotes (e.g. "red" or ~"red" depending on where you use it). Jun 25, 2014 at 12:26

2 Answers 2

2

Option #1

Unless I'm missing something from what you are trying to achieve, then simply removing the guard expression when (@color = red) will get a "dynamic" value output for @color, allowing it to be called directly by @red_SOPRA or @blu_SOPRA (whatever you pass).

LESS

@red_SOPRA: orange;
@red: red;
.gradient(@color) 
{
  background: linear-gradient( 180deg, @color 0%, yellow 100%);
}

div {
  .gradient(@red_SOPRA);
}

CSS Output

As you wanted...

div {
  background: linear-gradient(180deg, #ffa500 0%, #ffff00 100%);
}

Option 2

You can set up the mixin to perform a "'merging' between string passed" and the "_SOPRA" suffix, something like this:

LESS

@red_SOPRA: orange;
@blu_SOPRA: blue;
.gradient(@pre; @SOPRA: ~'@{pre}_SOPRA'; @color: @@SOPRA) 
{
  background: linear-gradient( 180deg, @color 0%,yellow 100%);
}

div
{
  .gradient('red');
}

.test {
  .gradient('blu');
}

CSS Output

div {
  background: linear-gradient(180deg, #ffa500 0%, #ffff00 100%);
}
.test {
  background: linear-gradient(180deg, #0000ff 0%, #ffff00 100%);
}

This will not fail gracefully if @color does not resolve to a valid @@SOPRA value.

0

First of all, I would like to thank ScottS for his answer, especially second option that is what I needed.

Secondly, I add solution that finally yesterday I found by myself, very similar in philosophy but little different and (maybe) easier to understand by newby, due to a temp variable.

@red_SOPRA: orange;
@red: red;

.gradient(@color) when (@color = 'red')
{
  @stop-1:~"@{color}_SOPRA";

  background: linear-gradient( 180deg, @@stop-1 0%,yellow 100%);
}

div
{
  .gradient('red');
}

Philosophy is the same, but with this "double passage" I think that could be more "talking"... :-)

UPDATE: After correct comment of seven-phases-max, I updaded my solution. Please note that parameter must be passed as string with 'red'

1
  • 1
    The only problem is that it's not working: SyntaxError: variable @#ff0000_SOPRA is undefined in ... (you need to use 'red' instead of red :). Btw., @stop-1: ~"@{color}_SOPRA"; can be just @stop-1: "@{color}_SOPRA"; (i.e. no need for ~ there). Jun 26, 2014 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.