SASS에서 동적 mixin 또는 함수 이름을 정의하는 방법은 무엇입니까?

Question

목록에있는 각 항목의 이름을 따서 이름이 지정된 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에서 지원하지 않는이 사용인가? 나는 그 매뉴얼에 대해 아무것도 찾을 수 없었다.

Answer 1

@mixins의 변수 보간은 현재 지원되지 않는 것 같습니다.

SASS 문서는이 #{} interpolation 및 describes it like this를 호출하십시오 documentation 당

Interpolation: #{}

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

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

이 변수 이름의 보간은 선택자와 속성 이름에 지원 될 것으로 보인다, 그리고 @mixin의합니다. 해당 기능을 원하면 이 이미 설명하는 내용을 추적하고있을지라도 file an Issue을 원할 수 있습니다.

편집 : 당신은 당신이에 대해 얘기하고 스타일링의 종류를 달성하기 위해 @mixin를 사용할 필요가시겠습니까? 보간법을 사용하여 선택기를 사용할 수 있습니까? 이 순간 (3 월 30 일, 2014)의로

$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 

Answer 2

, Chris Eppstein여전히 동적이나 mixin을 구현하기를 거부 : 예를 들어,이 일을 할 것이다. Github의 issue 857 및 issue 626을 참조하십시오.

저는 Chris가이 기능이 Sass가 진정한 힘을 발휘하는 데 필수적이라고 확신 시키려했습니다.

이 중요한 기능이라고 동의하는 경우, issue 857 및 issue 626에 가서이 문제를 직접 해결하시기 바랍니다. 우리 중 많은 분이이 기능의 유스 케이스를 제공할수록 Chris 및/또는 다른 수석 개발자를 설득 할 가능성이 커집니다.

Answer 3

가장 좋은 해결책은 인수를 취하는 단일 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