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 - 我可以＆＃39 ;找到一种编写mixin的方法来实现这一点而不会导致SASS错误。

这就是我尝试表达混音的方式：

@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;
}

使用SASS @while循环生成无空格的CSS字符串

1 个答案: