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

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

  }

}


冉冉说
浏览 716回答 2
2回答

catspeake

此时插值对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');}

慕斯王

我知道你不能扩展mixin - 你包括一个mixin,这正是我在第一行尝试完成的事情“.include - #{nth($ tests,$ i)} {@ include _#{nth($ tests,$ i)};}“。mixin是“_something1”,占位符是“%something1”(它本身包含_somethiing1) - 它们是相同的输出。但是,目的不同。.include-something1将用于媒体查询和其他“超出范围”的容量,其中extend无法实现所需的效果。
打开App,查看更多内容
随时随地看视频慕课网APP