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是一种脚本语言。 Curly大括号是SCSS语法的一部分（就像使用大括号的任何其他语言一样：JavaScript，PHP，C / C ++等），Sass并不只是＆＃34;把它原样放在＆＃34;上。 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;
    }
}

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

1 个答案: