混合，函数和变量名称的Sass插值

Question

我正在尝试循环Sass中的值列表，并使用当前键的插值来动态输出分别利用@include和@extend的类名。

这是一支笔，简化后显示了问题。http://codepen.io/ghepting/pen/vBmLy

正如您在标记中看到的那样，我尝试将"_"包括在插入字符串的内部和外部。在Sass如何支持插值的限制下，我是否缺少了一些东西?

(注:OP的笔不见了。这不是在笔中发现的原始代码，而是问题的粗略近似)

$error-light: red;
$error-dark: darken(red, 10%);
$success-light: green;
$success-dark: darken(green, 10%);
$dialogs: error, success;
@each $d in $dialogs {
  .#{$d} {
    background: $#{$d}-light;
  }
}

Answer 1

插值在这个时间点上对mixins或变量不起作用。你必须想出一个不同的方法来实现你的目标。

从Sass 3.3开始，您可以为变量使用映射:

$dialogs:
    ( error:
        ( light: red
        , dark: darken(red, 10%)
        )
    , success:
        ( light: green
        , dark: darken(green, 10%)
        )
    );
@each $name, $colors in $dialogs {
  .#{$name} {
      color: map-get($colors, dark);
  }
}

对于函数:

@function green() {
  @return lighten(green, 10%);
}
@function red() {
  @return lighten(red, 10%);
}
@mixin my-bg($function-name) {
  background: call($function-name);
}
.foo {
  @include my-bg('red');
}

Answer 2

另一种解决方法(针对特定用例):

https://sass-lang.com/documentation/at-rules/mixin passing-arbitrary-arguments

💡有趣的事实:因为参数列表跟踪位置参数和关键字参数，所以可以使用它将这两个参数同时传递给另一个mixin。这使得为mixin定义别名变得超级容易!

如果你对混合插值感兴趣，因为你有一组混合，像这样:

//_mixins.scss
@mixin text-style-1($args...){ //sass here }
@mixin text-style-2($args...){ //sass here }
@mixin text-style-3($args...){ //sass here }

//_text.scss
.text-style-1 { 
  @include text-style-1; 
}
.text-style-1-contrast { 
  @include text-style-1($contrast: true); 
}
.text-style-2 { 
  @include text-style-2; 
}
.text-style-2-contrast { 
  @include text-style-2($contrast: true); 
}

可以利用传递任意参数的优势，并为组使用别名:

//_mixins.scss
@mixin text-style-1($args...){ //sass here }
@mixin text-style-2($args...){ //sass here }
@mixin text-style-3($args...){ //sass here }
@mixin text($mixin, $args...) {
  @if $mixin == 'style-1' { @include text-style-1($args...); }
  @else if $mixin == 'style-2' { @include text-style-2($args...); }
  @else if $mixin == 'style-3' { @include text-style-3($args...); }
}

//_text.scss
$text-styles: 'style-1', 'style-2', 'style-3';
@each $style in $text-styles {
  .text-#{$style} { 
    @include text($style); 
  }
  .text-#{$style}-contrast { 
    @include text($style, $contrast: true); 
  }
}

Answer 3

遇到了这个问题，试图在mixin中包含一个插值变量，并能够用占位符解决它:

%color-scheme-dark-bg-1 { background-color: #4e5163; }
%color-scheme-dark-color-1 { color: #4e5163 !important; }
%color-scheme-light-bg-1 { background-color: #c7c8ce; }
%color-scheme-dark-bg-2 { background-color: #fd6839; }
%color-scheme-dark-color-2 { color: #fd6839 !important; }
%color-scheme-light-bg-2 { background-color: #fecfc1; }
.card_color {
    @mixin CardColorScheme($arg: 1) {
      .borderPercent {
        @extend %color-scheme-dark-bg-#{$arg};
      }
      .border {
        @extend %color-scheme-light-bg-#{$arg};
      }
      ul li:before {
        @extend %color-scheme-dark-color-#{$arg};
      }
      .percent {
        @extend %color-scheme-dark-color-#{$arg};
      }
      .heading {
        @extend %color-scheme-dark-color-#{$arg};
      }
    }
    &--scheme {
      &-1 {
        @include CardColorScheme(1);
      }
      &-2 {
        @include CardColorScheme(2);
      }
    }
  }

致敬:https://krasimirtsonev.com/blog/article/SASS-interpolation-in-a-name-of-variable-nest-variables-within-variables