Sass mixin의 변수 확인 및 정의 된 경우 인쇄

Question

3 개의 인수로 Sass mixin을 만듭니다. 그 중 하나는 선택 사항입니다. & 그렇지 않으면 통과해야하는 경우 인쇄하고 싶습니다. 아무 것도 인쇄하고 싶지 않습니다. .

@mixin name($arg1, $arg2, $arg3: false){ 
    @if $arg3 { #{$arg3} , } 
    & { 
     color: #{$arg1}; 
     > #{$arg2}{ 
      &:before{ 
       something... 
      } 
     } 
    } 
} 

하지만이 오류 내가 원하는 결과를 얻을 수있는 방법 그래서

Warning: Syntax error: Invalid CSS after "...$arg3}": expected "{", was "}"

을 던졌습니다 &을 작동하지 않습니다 내 믹스 인이 보이는 방법은 다음과

은?

Answer 1

이 당신이 그것을 쓰는 것이 방법이 될 것입니다 :

출력

@mixin name($arg1, $arg2, $arg3: false) { 
    $sel:(); 
    @if $arg3 { 
     $sel: append($sel, unquote($arg3)); 
    } 
    $sel: append($sel, unquote('&'), comma); 
    #{$sel} { 
     color: #{$arg1}; 
     > #{$arg2} { 
      &:before{ 
       border: 1px solid; 
      } 
     } 
    } 
} 

.foo { 
    @include name(yellow, blue, '.bar'); 
} 

그러나

.foo .bar, .foo { 
    color: yellow; 
} 

.foo .bar > blue:before, .foo > blue:before { 
    border: 1px solid; 
} 

은, 더 나은 다음과 같이 작성 될 수 있습니다

@mixin name($arg1, $arg2) { 
    color: #{$arg1}; 
    > #{$arg2} { 
     &:before{ 
      border: 1px solid; 
     } 
    } 
} 

%foo, .foo { 
    @include name(yellow, blue); 
} 

.foo .bar { 
    @extend %foo; 
}