Less CSS Compiler. Unable to Use Darken Property

Why doesn't this Less compile? What can I do to fix it?

The problem is with the below line of code in your example. It makes the content of the @color var be treated as a string instead of a color. Because of this, the Less compiler couldn't convert the color to its HSL value which is required for the darken function and thus results in the error.

@color : ~"@{@{colorName}}";

Instead of that, just use the double @ syntax. There is no need for the wrapping quotes or the escape function for your case.

@color : @@colorName;

LESS: Darken whatever color is already set on the element

You could try:

.active{
background:lighten(-10%);
}

Not sure if that'd work though so what might be better is using:

.active{
filter: brightness(0.1);
-webkit-filter: brightness(0.1);
-moz-filter: brightness(0.1);
-o-filter: brightness(0.1);
-ms-filter: brightness(0.1);
}

(play around with the 0.1 value to get your desired effect)

Using custom variable in Less function

Remove the quotes around #fff :

@primaryColor: #fff;
@customColor: darken(@primaryColor, 5%);

Less lighten, darken, and spin only work sometimes

There is nothing wrong with either your code (or) the output produced by the Less compiler. It is more an understanding problem.

The lighten() function increases the lightness of a color in the HSL space. The color that you have tried to lighten is #5e3e67 and its lightness value is 32.35294118%. (You can find this by using Less compiler's built-in lightness() function).

Below is an extract from the Less website:

Increase the lightness of a color in the HSL color space by an absolute amount.

So, when you set the percentage (amount) value in the lighten() function as anything greater than 67.65% roughly, the resulting lightness value would be 100% or more and that equates to #fff.

Set the percentage as anything less than 67.65% and you'd see that it does produce a color which is not white. For example,

#demo {
  color: lighten(#5e3e67, 67%);
}
#demo2 {
  color: lighten(#5e3e67, 50%);
}
#demo3 {
  color: lighten(#5e3e67, 33%);
}

produces the following colors in the compiled CSS:

#demo {
  color: #fefdfe;
}
#demo2 {
  color: #d8c7dd;
}
#demo3 {
  color: #b391bd;
}

---

For the spin() function in your code also the reason is the same. It doesn't matter how much hue is rotated by (which is what the spin() function does), white will remain white. Since the lighten() function's output is white, the output of the spin() will also be white only.

Managing multiple sections with less

In LESS you can get it with more generic code like this:

@what:   #111;
@where:  #222;
@who:    #333;
@post:   #444;
@events: #555;
@deals:  #666;

@items: what,
        where,
        who,
        post,
        events,
        deals;

@items-count: 6;

.sections() {
    .-(@items-count);
    .-(@i) when (@i > 0) {
        .-((@i - 1));

        @name: extract(@items, @i);
        .section_@{name} & {
            color: darken(@@name, 10%);
        }
    }
}

a {
    .sections();
}

b {
    .sections();
}

Or, if you don't need those variables for anything else, even better:

@items: what   #111,
        where  #222,
        who    #333,
        post   #444,
        events #555,
        deals  #666;

.sections() {
    .-(length(@items));
    .-(@i) when (@i > 0) {
        .-((@i - 1));

        @item: extract(@items, @i);
        @name: extract(@item, 1);
        .section_@{name} & {
            color: darken(extract(@item, 2), 10%);
        }
    }
}

a {
    .sections();
}

b {
    .sections();
}

It looks quite verbose but I suppose a level of customization worths this.
Note that length function is available only in LESS 1.5.x, for earlier versions you can use a predefined count variable as in the first example.

---

And yet another approach (if you prefer "copy-paste" style):

@what:   #111;
@where:  #222;
@who:    #333;
@post:   #444;
@events: #555;
@deals:  #666;

.item(@name) {
    .section_@{name} & {
        color: darken(@@name, 10%);
    }
}

a {
    .item(what);
    .item(where);
    .item(who);
    .item(post);
    .item(events);
    .item(deals);
}

P.S.

So every element that is altered by its section requires this list of sections defined. Sometimes its color, background-color, border-color etc...

It is also possible to add more "customization points" for properties as well - but it depends on how exactly those sections and CSS properties tie to each other... (So I did not put that into examples above to not make things even more complicated to understand).
Basically the key is "list/loops", "mixins/abstraction" etc.

Use hexadecimal color as string in darken function

You need to parse the the string to color using color().

@colorString: 'DADADA';
@color: color('#@{colorString}');
background: linear-gradient(to bottom right, darken(@color, 20%), @color);

Docs: http://lesscss.org/functions/#misc-functions-color

---

Related Topics