правила обхода с селектором условно

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 conditional-wrap($condition, $selector){ 
    @if $condition{ 
    #{$selector}{ 
     @content 
    } 
    } 
    @else{ 
    @content 
    } 
} 

И S О теперь мы можем сделать:

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

Answer 1

Сасс это язык сценариев . Кудрявые фигурные скобки являются частью синтаксиса SCSS (как и любой другой язык, который использует фигурные скобки: JavaScript, PHP, C/C++ и т. Д.), Сасс не просто «ставит его так, как есть». Синтаксис SASS (с отступом) вообще не использует фигурные скобки. Синтаксические анализаторы для каждого синтаксиса отличаются, но внутреннее представление селекторов и их свойств одно и то же, и так получается, что эти структуры выводятся при создании файла CSS: фигурные скобки вставляются соответствующим образом в соответствии со стилем вывода. Короче говоря, то, что вы пытаетесь написать, невозможно.

Сасс не заботится о том, как вы отступаете от кода, используя синтаксис 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; 
    } 
}