如何在SASS中定義動態混音或函數名稱？

我想在SASS中動態創建mixins，以列表中的每個項目命名，但似乎不起作用。如何在SASS中定義動態混音或函數名稱？

我試過，但我得到一個錯誤：

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch 
@each $event-icon in $event-icons 
    @mixin event-icon-#{$event-icon} 
    background-position: -($event-icon-width * $i) 0

錯誤：

Invalid CSS after "": expected expression (e.g. 1px, bold), was "#{$event-icon}"

這是使用不支持SASS？我在手冊中找不到關於它的任何內容。

來源

2013-04-01 Cristian

你確定在這種情況下你需要使用'@ mixin'嗎？在 –

@mixins中的變量插值當前似乎不受支持。

的SASS文件調用此#{} interpolation和describes it like this：

Interpolation: #{}

You can also use SassScript variables in selectors and property names using #{} interpolation syntax:

$name: foo; 
$attr: border; 
p.#{$name} { 
    #{$attr}-color: blue; 
}

每documentation，變量名的插值僅出現選擇器和屬性名得到支持，而不是爲@mixin秒。如果您需要該功能，您可能需要file an Issue，但this one可能已經在跟蹤您所描述的內容。

編輯： 您確實需要使用@mixin來完成那種造型你談論的？你可以用插值選擇器嗎？例如，將這項工作：

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch 
@for $i from 1 to length($event-icons) 
    $event-icon: nth($event-icons, $i) 
    .event-icon-#{$event-icon} 
    background-position: -($event-icon-width * $i) 0

來源

2013-04-01 18:27:01

以下看到我的回答我實際上已經結束了使用選擇器，但這不適用於所有情況。我想獨立於選擇器，並且可以很容易地在其他地方使用mixins，也可以使用僞選擇器，例如：懸停在鏈接上（將圖標包裹）。 – Cristian

由於這一刻（2014年3月30日）的，Chris Eppstein仍拒絕執行動態混入。在Github上參見issue 857和issue 626。

我一直在試圖說服克里斯，這個功能對Sass來說是非常重要的，可以釋放它的真正力量......而且我並不是唯一的那個。

如果你認爲這是一個重要的功能，請到issue 857和issue 626和解決自己這個問題。我們越多的人提供這個功能的用例，我們就越有可能說服克里斯和/或其他主要開發人員之一。

來源

2014-03-30 00:43:32

+1正如我在線程中所說的那樣，這是一個很好的功能 - 我實際上需要它。只要Sass功能凍結完成，我們就可以開始工作。我不知道你爲什麼試圖遊說我們已經同意的功能是一個好主意。相反，也許在拉請求上工作，以便儘快完成？ – chriseppstein

@chriseppstein我很害怕Ruby，我不太流利。我更喜歡PHP/MySQL，HTML/CSS/JS和XML/Json類的人。無論如何，你會注意到這個答案發佈於2014年3月30日。那時候，你仍然不願意添加這個功能。我很高興你改變了主意。也許我的遊說最終得到了回報？！？ ;-) –

其實你是對的。我還沒有確信mixin的動態定義是一個好主意。但是，您鏈接的問題是使用動態名稱包含混音。我是爲了什麼。 OP的問題可以通過接受單個mixin的參數來解決，而不是爲每個圖標定義一個唯一的mixin。 – chriseppstein

最好的解決方案是實現一個接受參數的單個mixin。

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch 
@mixin event-icon($name) 
    @if not index($event-icons, $name) 
    @error "#{$name} is not an event icon." 
    background-position: -($event-icon-width * $i) 0

來源

2015-05-08 22:45:04 chriseppstein

如何在SASS中定義動態混音或函數名稱？

回答

相關問題