7

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

3 回答 3

12

目前，插值不适用于 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');
}
于 2013-04-22T17:47:05.297 回答
0

遇到了试图在 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 ://krasimrtsonev.com/blog/article/SASS-interpolation-in-a-name-of-variable-nest-variables-within-variables

于 2022-01-04T01:37:21.443 回答
0

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

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); 
  }
}
于 2021-08-17T16:16:28.563 回答