Mixin、函数和变量名称的 Sass 插值答案

【问题标题】：Sass Interpolation of Mixin, Function, and Variable namesMixin、函数和变量名称的 Sass 插值
【发布时间】：2013-04-15 16:13:18
【问题描述】：

我正在尝试遍历 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;
  }
}

【问题讨论】：

Mixin/Function 插值正在积极研究中，应该包含在未来的版本中：github.com/nex3/sass/issues/626
问题是Sass是用来编译成CSS的。为了“插入”一个 mixin/function/var 名称，你需要一些可以编译为 Sass 或“Sassass”的东西（语法上很棒的语法上很棒的样式表）。

标签： sass

【解决方案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');
}

【讨论】：

你不是 @extend 一个 mixin。通常假设插值对变量有效，如果有效，它看起来像这样：background: $foo-#{$bar}
是的，我知道你不能扩展一个 mixin —— 你 include 一个 mixin 而这正是我在第一行想要完成的。包括-#{nth($tests, $i)} { @include _#{nth($tests, $i)}; }"。 mixin 是“_something1”，占位符是“%something1”（它本身包括_something1）——它们是相同的输出。但是，目的不同。 .include-something1 将用于媒体查询和其他“超出范围”的能力，其中 extend 无法达到预期的效果。
正如我已经回答的那样，插值不适用于 mixins。输出是否相同无关紧要，这是无效的：@include _#{nth($tests, $i)};
解决方法将更多地取决于您正在做什么。 github.com/nex3/sass/issues/626
嘿，我们发现了相同的问题线程。感谢@cimmanon 的帮助

【解决方案2】：

替代解决方法（针对特定用例）：

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

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

如果你对 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); 
  }
}

【讨论】：

【解决方案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

【讨论】：