用SASS @ while循環產生無空白的CSS字符串

Question

我正在嘗試編寫一個重複字符串作爲選擇器的一部分的mixin。我希望的輸出是非常空白敏感的，但我找不到一個沒有引入空白的SASS編譯方式。

所需的輸出將是：

body:nth-child(n):nth-child(n){ 
    background: blue; 
} 

body:nth-child(n){ 
    background: green; 
} 

body { 
    background: red; 
} 

而且我想用這個調用來實現它：

body { 
    @include increase-specificity(2){ 
    background: blue; 
    } 

    @include increase-specificity{ 
    background: green; 
    } 

    background: red; 
} 

的問題是，:nth-child(n)串不能接受當前選擇器（&）之後的任何空格，或者重複之間的任何空格，之後不更改功能CSS - 而且我不能找到一種編寫mixin的方法來實現這一點，而不會導致SASS錯誤。

這是怎麼了，我想表達的mixin：

@mixin increase-specificity($depth: 1){ 
    &@while($depth > 0){#{'nth-child(n)'}$depth: $depth-1}{ 
    @content; 
    } 
} 

And here's a Codepen to show it breaking。

我的問題到目前爲止是：

• SASS不會容忍@while環緊隨其後&（&@while{ ...），但我想不出任何其他方式來避免編譯之間的空白字符串。同樣的，我找不到一種方式來編寫一個功能@while循環，而不用自由空白：當前語法到達插補器的末尾時（#{…}）（不知道爲什麼）去除插值會導致它跳到試圖解釋nth-child的parens。

Answer 1

你的代碼有很多錯誤（壞邏輯，缺失空格，不匹配的括號等），不值得努力嘗試解釋爲什麼它不起作用。

@mixin increase-specificity($depth: 1) { 
    $sel: ''; 
    @while($depth > 0) { 
    $sel: $sel + ':nth-child(n)'; 
    $depth: $depth - 1; 
    } 
    &#{$sel} { 
    @content; 
    } 
} 

body { 
    @include increase-specificity(2){ 
     background: blue; 
    } 

    @include increase-specificity{ 
     background: green; 
    } 

    background: red; 
}