與流體參數嵌套混入

Question

我有2周的div

<div class="first-div"></div> 
    <div id="second-div"></div> 

現在我定義使用SCSS這樣對於邊界

@mixin border($thickness, $border-type, $color){ border:$thickness $border-type $color;}

一個混合這mixixn本身嵌套在另一個這樣

@mixin NestOtherMixins{ 
@include border(2px, solid, red); 
} 

我將包括這個mixin（NestOtherMixins）來博th類和他們每個人都瞄準一個div的id，但這裏是我想在應用mixin時應用不同的顏色的技巧，因此具有class屬性的div將會說紅色，id將會是藍色。這樣做

.first-div{ 
@include NestOtherMixins; 
} 
#second-div{ 
@include NestOtherMixins; 
} 

只會導致兩個div的顏色相同。一些建議，我分離mixin和我將能夠控制邊界的變量，但我想知道我可以嵌套在另一個邊界mixin和abe來控制變量時適用於不同的類或ID？

Answer 1

您不能更改變量/屬性的值，具體取決於它們分配給哪種類型的選擇器。雖然你可以在你的mixin中傳遞一個參數來爲你做這個選擇。

.foo { 
    @include test-mixin('foo'); 
} 

.bar { 
    @include test-mixin('bar'); 
} 

@mixin test-mixin($value) { 

    @if $value == 'foo' { 
    //do foo 
    } @else if $value == 'bar' { 
    //do bar 
    } 
}