有条件地用选择器包装规则

Question

我正在尝试做的是一个带有可选参数的 mixin，以包含或不包含围绕规则的选择器。这是预期的行为：

@include smth(true)  => .class{ color:blue }
@include smth(false) => color: blue

我试过这样的：

@mixin smth($selector:true){
   @if $selector {
      .class{
   }

   color: blue;

   @if $selector{
       }
   }
}

@if 指令中的括号显然是问题所在。所以我尝试将@if 的内容放在双引号".class{" 下并使用插值#{".class{"}（有和没有转义字符\}，所以它不会干扰但没有任何作用。
简而言之，我不希望 sass 处理 @if 的内容，而只是“按原样”处理。

更新

从 cimmanon 的回答中，我设法创建了一个更通用的 mixin：

@mixin conditional-wrap($condition, $selector){
  @if $condition{
    #{$selector}{
        @content
    }
  }
  @else{
    @content
  }
}

所以我们现在可以这样做了：

@mixin smth($selector:true){
  @include conditional-wrap($selector, '.class'){
      color: blue;
  }
}

Answer 1

Sass 是一种脚本语言。花括号是 SCSS 语法的一部分（就像任何其他使用花括号的语言一样：JavaScript、PHP、C/C++ 等），Sass 不只是“按原样”。 SASS（缩进）语法根本不使用花括号。每种语法的解析器不同，但选择器的内部表示及其属性是相同的，生成 CSS 文件时这些结构的输出方式也是相同的：根据输出样式适当插入花括号。简而言之，你要写的东西是不可能的。

Sass 不关心你如何使用 SCSS 语法缩进你的代码，它只关心匹配花括号。结果，您的 mixin 被解释如下：

@mixin smth($selector: true) {
   @if $selector {
       .class {

       }

       color: blue;

       @if $selector {

       }
   }
}

你可以做的是改变你的逻辑。

@mixin smth($selector: true) {
    @at-root #{if($selector, selector-nest(&, '.class'), &)} {
        color: blue;
    }
}

对于 Sass 3.3 或更早版本：

@mixin foo {
    color: blue;
}

@mixin smth($selector: true) {
    @if $selector {
        .class {
            @include foo;
        }
    } @else {
        @include foo;
    }
}