SASS 및 데이터 속성 복수

Question

여러 선택을하기 위해 SAS를 중첩하는 데 문제가 있습니다. 그것에 대해 많은 것을 배우고, 저를 도울 수 있고 이해할 수 있기를 바랍니다 (아주 좋은 영어를 쓰지 않기 때문에).

SASS 믹스 인 :

@mixin data($x) { 
    $sel: &; 
    $collector:(); 

    @for $i from 1 through length($sel) { 
     $s: nth($sel, $i); 
     $last: nth($s, -1); 
     @if str-slice($last, -1) == "]" { 
      // if is just the bare attribute with no value, $offset will be -1, otherwise it will be -2 
      $offset: -1; 
      $current-x: $x; 

      @if str-slice($last, -2) == '"]' { 
        // this attribute already has a value, so we need to adjust the offset 
        $offset: -2; 
      } @else { 
        // no attribute value, so add the equals and quotes 
        $current-x: '="' + $x + '"'; 
      } 
      $last: str-slice($last, 1, $offset - 1) + $current-x + str-slice($last, $offset); 
      $collector: append($collector, set-nth($s, -1, $last), comma); 
     } @else { 
      // following line will append $x to your non-attribute selector 
      $collector: append($collector, selector-append($s, $x), comma); 
      // the following line will not change your non-attribute selector at all 
      //$collector: append($collector, $s, comma); 
     } 
    } 

    @at-root #{$collector} { 
     @content; 
    } 
} 

SASS :

[data-content] { 
    @include data("content") { 
     background: black; 
    } 
} 

출력 :

[data-content="content"] { 
    background: black; 
} 

문제는 내가 북동 수 없다 성 하나 개 이상의 항목, 예를 들어 작동하지 않습니다

는

[data-content] { 
    @include data("content", "menu") { 
     background: black; 
    } 
} 

출력 :

[data-content="content"], 
[data-content="menu"] { 
    background: black; 
} 

어떤 방법 해결하기 위해?

Answer 1

선택자를 변수로 전달하지 않고 지정할 필요가없는 경우 항상 이와 같은 작업을 수행 할 수 있습니다.

[data-content="content"], [data-content="menu"]{ 
    @include data() { 
     background: black; 
    } 
}