CODEWITHSUNDEEP
cssless
denislexic
denislexic

Reputation: 11352

LESS: Darken whatever color is already set on the element

Just started using LESS and it's amazing. I was wondering though, is it possible to darken whatever color it was assigned.

I have several themes on my site and when a link is active, I add it a class "active" which should darken the color and background.

Is something like this possible:

.active{
   background:darken(10%);
}

Without having to specify the background color...

Upvotes: 1

Views: 3275

Answers (2)

StilgarBF
StilgarBF

Reputation: 1060

darken (as the other functions) expects 2 parameters. first the color, second the amount to change it. see http://lesscss.org/functions/#color-operations-darken

Since LESS is only a preprocessor for css (it creates css) what you want can not work. CSS has no way of getting a color of an element and then work with it.

While LESS uses JS to process the less files and create css, that usually wont happen client-side. In production you create the css-file once and deliver that.

You may want to look for a client-side js-solution if you really have no way of knowing what the color is.

Upvotes: 4

Pixelomo
Pixelomo

Reputation: 6737

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)

Upvotes: 1

Related Questions