首頁猿問混合，函數(shù)和變量名稱的Sass插值

混合，函數(shù)和變量名稱的Sass插值

算法算法與數(shù)據(jù)結(jié)構(gòu) 數(shù)學(xué)

冉冉說 2019-09-06 16:32:51

我正在嘗試遍歷Sass中的值列表并使用當(dāng)前鍵的插值來動(dòng)態(tài)輸出分別使用@include和@extend的類名。這是一個(gè)顯示問題的筆，簡化了。http://codepen.io/ghepting/pen/vBmLy正如您在標(biāo)記中看到的那樣，我嘗試在插值字符串內(nèi)部以及外部字符串中包含“_”。是否有一些我想要解決Sass如何支持插值的限制？（注意：OP的筆已經(jīng)消失了。這不是筆中的原始代碼，而是問題的粗略近似）$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貢獻(xiàn)1111條經(jīng)驗(yàn) 獲得超0個(gè)贊

此時(shí)插值對mixins或變量不起作用。你必須想出一個(gè)不同的方法來實(shí)現(xiàn)你的目標(biāo)。

從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');

}

反對回復(fù) 2019-09-06

慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

我知道你不能擴(kuò)展mixin - 你包括一個(gè)mixin，這正是我在第一行嘗試完成的事情“.include - ＃{nth（$ tests，$ i）} {@ include _＃{nth（$ tests，$ i）};}“。mixin是“_something1”，占位符是“％something1”（它本身包含_somethiing1） - 它們是相同的輸出。但是，目的不同。.include-something1將用于媒體查詢和其他“超出范圍”的容量，其中extend無法實(shí)現(xiàn)所需的效果。

反對回復(fù) 2019-09-06