私たちがそれを呼び出すときにいくつかの規則を適用するSASS mixin

Question

変数がある値と等しいかどうかを尋ねるいくつかのCSS規則を適用するSASS/LESSミックスインを作成したいと思います。

@mixin myTest($myVar: $num) { 
    @if ($myVar == $num) { 
     /* Apply rules if $myVar is set $num - I DO NOT KNOW WHAT SHOULD BE THERE */ 
    } @else { 
     /* Do nothing */ 
    } 
} 

そして、私はこのように私ミックスインを使用したい：@include myTest(1) { ... }の括弧内の唯一のルールが適用されるように、

$num: 1; 

@include myTest(1) { 
    h1 { 
     color: blue; 
     background: red; 
    } 
} 

@include myTest(2) { 
    h1 { 
     color: yellow; 
     background: green; 
    } 
} 

。

問題は、私はそれを行う方法を知らないということです。

Answer 1

$num: 1; 
@mixin myTest($myVar: $num) { 

    @if ($myVar == $num) { 
     /* Apply rules if $myVar is set $num - I DO NOT KNOW WHAT SHOULD BE THERE */ 
     @content; // this is how you get it in here 
    } @else { 
     /* Do nothing */ 
    } 
} 

@include myTest(1) { 
    h1 { 
    background:red; 
    } 
} 

@include myTest(2) { 
    h1 { 
    background:blue; 
    } 
} 

https://codepen.io/anon/pen/YEJKRm

を通じてプッシュするあなたのミックスインしていたすべてのものを取得するにはミックスインは、これは

を助けたいと考えています

Answer 2

私は、私は完全にあなたの質問を理解してきた非常にわからないんだけど、あなたがあなたのミックスインの内側にあなたのCSSルールを移動している何をする必要があるかのように思える：あなたはinyour @content使用するneeed

@mixin myTest($num) { 
    @if $num === 1 { 
     color: blue; 
     background: red; 
    } @else { 
     color: yellow; 
     background: green; 
    } 
} 


$num: 1; 
h1 { 
    @include myTest($num); 
} 

Answer 3

myTestは$myVarの値をチェックし、渡されたCSSルールは@content（documentation参照）に適用されます。

@mixin myTest($myVar: $num) { 
    @if ($myVar= $num) { 
    @content; 
    } 
} 

$num: 1; 

@include myTest(1) { 
    h1 { 
    color: blue; 
    background: red; 
    } 
} 

@include myTest(2) { 
    h1 { 
    color: yellow; 
    background: green; 
    } 
}