Adding a variable to a property causes lighten/darken to not work

February 17, 2022

I am trying to create variables using a mixin, however, when I do so, the lighten and darken functions don’t work.

@mixin create-color($name, $value) {
  --color-#{$name}: #{$value};
  --color-#{$name}-light: lighten($color: #{$value}, $amount: 10);
  --color-#{$name}-dark: darken($color: #{$value}, $amount: 10);
}

:root {
  @include create-color('primary', #0000cd);
}

This results in the following output:

:root {
    --color-primary: #0000cd;
    --color-primary-light: lighten($color: #0000cd, $amount: 10);
    --color-primary-dark: darken($color: #0000cd, $amount: 10);
}

>Solution :

You need to interpolate the whole function.

@mixin create-color($name, $value) {
  --color-#{$name}: #{$value};
  --color-#{$name}-light: #{lighten($color: $value, $amount: 10)};
  --color-#{$name}-dark: #{darken($color: $value, $amount: 10)};
}

:root {
  @include create-color('primary', #0000cd);
}