如何通過在Sass中嵌套將附加信息添加到屬性選擇器中？

Question

我試圖避免「class'itis」，並充分利用SASS嵌套實現以下CSS輸出：

a[class^="utility-button"], a[class*=" utility-button"] { //some shared css rules} 
.utility-button-one {//some unique css rules} 
.utility-button-two {//some unique css rules} 

這是我想什麼能夠做到（我所目前嘗試）：

a[class^="utility-button"], a[class*=" utility-button"] { 
    //some shared css rules 

    &-one { 
     //some unique css rules 
    } 
    &-two { 
     //some unique css rules 
    } 
} 

現在我知道這是什麼會輸出，如果它編譯在技術上是：

a[class^="utility-button"], a[class*=" utility-button"] { //some shared css rules} 
a[class^="utility-button"]-one {//some unique css rules} 
a[class^="utility-button"]-two {//some unique css rules} 
a[class*=" utility-button"]-one {//some unique css rules} 
a[class*=" utility-button"]-two {//some unique css rules} 

其中明確將無法正常工作。

有沒有什麼方法可以解決這個問題 - 如果不想爲每個<a>添加兩個類，我希望繼承實用程序按鈕樣式取決於第二個類，這真是太棒了。

Answer 1

父選擇器不能這樣使用，它只包含對前一個選擇器的引用。 Sass無法定位屬性選擇器的內容（至少，不在目前可用的任何字符串操作函數之外）。

您可以做的最好的方法是編寫自定義函數或使用內容感知混合來爲變量執行髒活。這裏是一個混合版本可能是什麼樣子（假設你想使用嵌套保持）：

@mixin my-sel($append: false) { 
    $class: if($append, selector-append(&, $append), &); 
    @at-root a[class^="#{$class}"], a[class*=" #{$class}"] { 
     @content; 
    } 
} 


utility-button { 
    @include my-sel { 
     /* some shared css rules */ 
    } 

    @include my-sel(-one) { 
     /* some unique css rules */ 
    } 
    @include my-sel(-two) { 
     /* some unique css rules */ 
    } 
} 

輸出：

a[class^="utility-button"], a[class*=" utility-button"] { 
    /* some shared css rules */ 
} 
a[class^="utility-button-one"], a[class*=" utility-button-one"] { 
    /* some unique css rules */ 
} 
a[class^="utility-button-two"], a[class*=" utility-button-two"] { 
    /* some unique css rules */ 
} 

如果您需要能夠嵌套到這一點其他選擇，那麼它會相當多的更復雜：

@function class-to-attribute-selector($class) { 
    // the following line is completely optional, but you definitely need the @return 
    $class: if(str-index($class, '.') == 1, str-slice($class, 2), $class); 
    @return #{'[class^="#{$class}"]'}, #{'[class*=" #{$class}"]'}; 
} 

@mixin class-sel { 
    $sel-list: &; 

    $new-sel:(); 
    @each $sel in $sel-list { 
     @if length($sel) > 1 { 
      $s:(); 
      @for $i from 1 to length($sel) { 
       $s: append($s, nth($sel, $i)); 
      } 
      $class: nth($sel, length($sel)); 
      $new-sel: append($new-sel, selector-nest($s, class-to-attribute-selector($class))); 
     } @else { 
      $new-sel: join($new-sel, class-to-attribute-selector(nth($sel, 1))); 
     } 
    } 

    @at-root #{$new-sel} { 
     @content; 
    } 
} 

.foo { 
    .utility-button { 
     @include class-sel { 
      /* some shared css rules */ 
     } 

     &-one { 
      @include class-sel { 
       /* some unique css rules */ 
      } 
     } 
     &-two { 
      @include class-sel { 
       /* some unique css rules */ 
      } 
     } 
    } 
} 

.bar { 
    @include class-sel { 
     /* other rules */ 
    } 
} 

輸出：

.foo [class^="utility-button"], .foo [class*=" utility-button"] { 
    /* some shared css rules */ 
} 
.foo [class^="utility-button-one"], .foo [class*=" utility-button-one"] { 
    /* some unique css rules */ 
} 
.foo [class^="utility-button-two"], .foo [class*=" utility-button-two"] { 
    /* some unique css rules */ 
} 

[class^="bar"], [class*=" bar"] { 
    /* other rules */ 
}