6

I have a mixin that accepts an argument that I want to pass into a variable.

@mixin my_mixin($arg) {
  background-color: $state-#{$arg}-text;
}

2 Answers 2

9

Interpolation of variable names is currently not possible in SASS. Here is the issue that discusses.

However, you may use interpolation of placeholders:

%my-dark-styles {
    background-color: #000;
}
%my-white-styles {
    background-color: #FFF;
}

@mixin my_mixin($arg) {
    @extend %my-#{$arg}-styles;
}

.header {
    @include my_mixin("dark");
}
.footer {
    @include my_mixin("white");
}

This compiles to:

.header {
  background-color: #000;
}

.footer {
  background-color: #FFF;
}
1
  • What if I want to build a material variable so as to reference it ? Say $primary: mat-palette($mat-#{$name}, 100); gives me the fateful error.
    – Stephane
    Jun 2, 2020 at 13:02
4

Since Sass 3.3 you can use maps also https://sass-lang.com/blog/sass-33-is-released

Here is an example:

$state-light-text : #FFFFFF;
$state-dark-text : #000000;

$color-map: ( //create a array to support the two colors light and dark
    light: $state-light-text,
    dark: $state-dark-text
);


@each $color-key, $color-var in $color-map {
    .myclass--#{$color-key} { //will generate .myclass--light  .myclass--dark
        background-color: $color-var; // equal $state-light-text or $state-dark-text
    }
}

It will compile into:

.myclass--light { 
    background-color: #FFFFFF;
}

.myclass--dark {
    background-color: #000000;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.