csswebpacksassnode-sasssass-loader

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;
}