CODEWITHSUNDEEP
variablesnestedsass
Curtis Blackwell
Curtis Blackwell

Reputation: 3207

Is it possible to nest variables within variables in SASS?

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

Upvotes: 6

Views: 12622

Answers (2)

Liem
Liem

Reputation: 770

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

Upvotes: 4

Krasimir
Krasimir

Reputation: 13549

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

Upvotes: 9

Related Questions