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);
}
CodePudding user response:
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);
}