是否可以在 SASS 的变量中嵌套变量？答案

【问题标题】：Is it possible to nest variables within variables in SASS?是否可以在 SASS 的变量中嵌套变量？
【发布时间】：2016-08-26 21:56:20
【问题描述】：

我有一个 mixin，它接受我想要传递给变量的参数。

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

【问题讨论】：

标签： variables nested sass

【解决方案1】：

目前在 SASS 中无法对变量名进行插值。这是讨论这个https://github.com/nex3/sass/issues/626

的问题

但是，您可以使用占位符的插值：

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

这编译为：

.header {
  background-color: #000; }

.footer {
  background-color: #FFF; }

【讨论】：

如果我想构建一个材质变量来引用它怎么办？说$primary: mat-palette($mat-#{$name}, 100); 给了我致命的错误。

【解决方案2】：

从 Sass 3.3 开始，您还可以使用地图 http://blog.sass-lang.com/posts/184094-sass-33-is-released

这是一个例子：

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

它会编译成：

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

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

【讨论】：