CODEWITHSUNDEEP
sass
hixhix
hixhix

Reputation: 791

unable to use darken if color variable has important flag

I use darken to define another color, however if the base color has important flag, it fails to compile. This is my scss

$baseColor: #FF6600 !important;

.my-link:active {
    color: darken($baseColor, 20%);
}

and this is the error ... (#FF6600 !important) is not a color for 'darken'

If I change important to default, everything works fine. I do need important flag as this variable is overwritten in different places. I'm wondering how I can fix this? Thanks.

Upvotes: 2

Views: 644

Answers (1)

cimmanon
cimmanon

Reputation: 68319

The error is quite clearly telling you what's wrong. You're trying to pass in a list containing a color (#FF6600) and a string (!important) to a function that is expecting a color. The !default flag is not a string, it is a Sass language construct.

If you need to use !important often enough that you need to use it every time you use this variable, I strongly recommend that you reevaluate your code. This is considered to be a code smell.

If you really really really need it, you have to use the nth() function to extract the first element of the list.

$baseColor: #FF6600 !important;

.my-link:active {
    color: darken(nth($baseColor, 1), 20%) nth($baseColor, 2);
}

Note that this will raise an error if your variable is not actually a list (because you're trying to select an element that doesn't exist). If you don't actually need !important here, then this will work fine with or without a list:

$baseColor: #FF6600 !important;

.my-link:active {
    color: darken(nth($baseColor, 1), 20%);
}

Upvotes: 4

Related Questions