CODEWITHSUNDEEP
csssass
Get Off My Lawn
Get Off My Lawn

Reputation: 36311

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

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

Upvotes: 0

Views: 142

Answers (1)

sallf
sallf

Reputation: 2868

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

Upvotes: 2

Related Questions