How to use result of built-in function in another function in SASS?

I want to use result of darken( $var, 10% ) in oppositeColor( $darkenedColor ) function in SASS.

I have the following code:

$color1: #000000 !default;
$color2: darken( $color1, 5% ) !default;
$color3: oppositeColor( $color2 ) !default;
$color4: darken( $color3, 15% ) !default;

And I’m getting this error:

SassError: $color: oppositeColor(#000000) is not a color.
   ╷
28 │ $color4: darken($color3, 15%) !default;
   │          ^^^^^^^^^^^^^^^^^^^^

Is there any way I could use result of darken( $color1, 5% ) in oppositeColor( $color2 ) without getting errors?

>Solution :

Maybe you mean complement?

I edited the code to creating a working example:

$color1: #FFF !default;
$color2: darken( $color1, 5% ) !default;
$color3: complement( $color2 ) !default;
$color4: darken( $color3, 15% ) !default;

.test{
    color: $color4;
}

The result is:

.test {
  color: #cccccc;
}

Leave a Reply