SASS - Почему этот миксин не включен?

Question

Я новичок в SASS, поэтому, пожалуйста, несите меня, если это кажется явным очевидным.

У меня есть тест SASS код:

$background : "yellow"; 
$color : "green"; 

%my-placeholder { 

    background: $background; 
    color: $color; 

} 

@mixin my-mixin($background,$color) { 

    %my-placeholder { 

    background: $background; 
    color: $color; 

    } 

} 

.my-class { 

    /* Why does this 'my-mixin()' NOT get included to the class? */ 
    @include my-mixin($background,$color); 
    color: blue; 

} 

Это сочетание переменных, заполнителей и Mixins, который выводит:

.my-class { 
    /* Why does this 'my-mixin()' NOT get included to the class? */ 
    color: blue; 
} 

Как вы можете видеть, @include из Mixin, который содержит вызов для перезаписывания заполнителя, не используется в пределах выбора .my-класса. Почему это?

У меня есть SASS-Meister, где вы можете увидеть это вживую: http://sassmeister.com/gist/8015459

Является ли это нормальное поведение? Существуют ли зависимости, которые мне не хватает, чтобы использовать эту функцию?

Спасибо!

Answer 1

Включается, но вы просто не называете это. % является селектором-заполнителем, поэтому вам нужно будет @extend %my-placeholder после вызова mixin. Это все равно закончится тем, чего вы, вероятно, не ожидаете.

.my-class { 
    color: blue; 
} 
.my-class .my-class { 
    background: "yellow"; 
    color: "green"; 
} 

Я думаю, вам может быть лучше с простым миксином, поскольку вам нужно переключать переменные вверх.

@mixin my-mixin($background: #ccc, $color: #000){ 
    background: $background; 
    color: $color; 
} 

.my-class { 
    @include my-mixin(red, green); 
} 

Кроме того, кажется, что вы могли бы думать, что переменная, определенная внутри селектора будет сделать его локальным, это не так. Это определенно бросило меня за цикл, пока я учился.

$color: red; 

.foo { 
    $color: blue; 
    color: $color; // $color is blue... 
} 

.bar { 
    color: $color; // $color is still blue, not red... 
}