有條件選擇條件包裝規則

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的內容，但只是 「把它當成是」

UPDATE

從cimmanon答案我設法創造一個更一般的mixin：

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

和S o我們現在可以做：

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

Answer 1

薩斯是腳本語言。花括號是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; 
    } 
} 

社科院3.3或以上版本：

@mixin foo { 
    color: blue; 
} 

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