CODEWITHSUNDEEP
csssass
Максим Медведєв
Максим Медведєв

Reputation: 41

Argument `$color` of `darken($color, $amount)` must be a color

$color-button: var(--color-9);
&:hover, &:focus {
  background-color: darken($color-button, 10%);
}

Error: argument $color of darken($color, $amount) must be a color Without Bootstrap

Upvotes: 2

Views: 1580

Answers (1)

A Haworth
A Haworth

Reputation: 36492

By the time your code reaches the user’s browser it is CSS. At the time SASS is processing your code it doesn’t know what color the variable you passed it will have so it can’t process it to darken it.

To do this sort of thing live during run time you could use some JavaScript to work out the darkened color or, if there is a known set of colors which may have to be darkened, build in their dark equivalents.

This SO question and answer may be helpful How to create color shades using CSS variables similar to darken() of SASS?. Basically if you are going to do the processing yourself, working in hsl makes life easier.

Upvotes: 2

Related Questions