Less CSS fade function not working with variable

Question

i'm using Less CSS with bundler, which I build on an Asp.Net platform.

I have the following code:

&::after {
    .ScaleX(0);
    .Transition(0.2s 0.2s);
    background-color: fade(@accentColor, 12%);
    border-radius:0.2rem;
    height:100%;
    top:0;
    z-index:-1;
}

It fails to complile.

If I change the background-color like this, it works:

background-color:@accentColor;

I set my color palettes like this:

.AccentPalette(orange);

.AccentPalette(@palette; @color:500) {
    .Swatch(@palette); 

    @accentColor:~"@{accent@{color}}";

    @accent50:  @50;
    ... and some more
}

.Swatch(orange)
{
    @50: #fff3e0;
    @100:#ffe0b2;
    @200:#ffcc80;
    @300:#ffb74d;
    @400:#ffa726;
    @500:#ff9800;
    @600:#fb8c00;
    @700:#f57c00;
    @800:#ef6c00;
    @900:#e65100;
}

Any ideas?

I had answered the question without realizing it was a dupe (it was a very old one) and so have closed it now. The questions are in essence the same as both are referring to color functions on an evaluated string. — Harry, Oct 18 '16 at 11:49

Harry · Accepted Answer · 2016-10-18T11:45:09.090

1

It fails to compile because the @accentColor variable seems to contain a String and not a Color as its value. The fade() function only works on color values.

To fix the problem, convert the String into the Color value by using the color() function.

background-color: fade(color(@accentColor), 12%);

The value is being considered as a String because of the below interpolation statement. The e() or the ~"value" function outputs a String.

@accentColor: ~"@{accent@{color}}";

As pointed out by seven-phases-max in his comment, the below approach would also avoid the need for the color() function.

.AccentPalette(@palette; @color:500) {
  .Swatch(@palette); 
  @accentColor: "accent@{color}"; /* note the change, we are just concatenating and not evaluating */
  @accent500:  @500;

  &::after {
    background-color: fade(@@accentColor, 12%); /* actual evaluation happens here */
    border-radius:0.2rem;
    height:100%;
    top:0;
    z-index:-1;
  }  
}

edited Oct 18 '16 at 11:45

answered Oct 18 '16 at 11:05

Harry

87,580
25
202
214

1

Harry, you're an absolute star! – John Ohara Oct 18 '16 at 11:09
1

I liked the [previous version](http://stackoverflow.com/questions/24492770) more. The fact that now we can convert a string to a color still does not make all that `~"@{a@{b}}"` anything but a misuse. – seven-phases-max Oct 18 '16 at 11:34
@seven-phases-max: Ah, a duplicate answer :( Let me close this one and thanks for finding that one. I agree that one seems better. – Harry Oct 18 '16 at 11:41
I did not raise the duplicate mark as since those times two key things have changed (that days `~"@{a@{b}}"` syntax was not even officially supported and `color()` could not actually convert all types of strings as does now). So it's up to you, but yes, probably adding more info to the older answer would be more convenient). – seven-phases-max Oct 18 '16 at 11:46
@seven-phases-max: That's true but as you say it might be better to maintain one copy - the old one. It already has the color() function mentioned but is using complex JS stuff so will update that also :) – Harry Oct 18 '16 at 11:48

Less CSS fade function not working with variable

1 Answers1