我正在嘗試遍歷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; }}
2 回答
catspeake
TA貢獻1111條經驗 獲得超0個贊
此時插值對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');
}
慕斯王
TA貢獻1864條經驗 獲得超2個贊
我知道你不能擴展mixin - 你包括一個mixin，這正是我在第一行嘗試完成的事情“.include - ＃{nth（$ tests，$ i）} {@ include _＃{nth（$ tests，$ i）};}“。mixin是“_something1”，占位符是“％something1”（它本身包含_somethiing1） - 它們是相同的輸出。但是，目的不同。.include-something1將用于媒體查詢和其他“超出范圍”的容量，其中extend無法實現所需的效果。
添加回答
舉報
0/150
提交
取消