プロパティ値を確認する関数が

Question

の場合SASS 'if()関数では、プロパティ値をチェックできますか？例えば。 buttonにはデフォルトでmargin-right: 10pxが必要です。ボタンがfloat: rightの場合、余白はmargin-left: 10pxになります。

以下のような何か：

明らか

margin: if(float=="right" $margin-right $margin-left); 

、上記（そうでない場合は、私がここに書くことはない）動作しません。しかし、これは可能ですか？私はこれが少なくなる可能性のあるCSSのものをやったので、

Answer 1

それはしばらくしているが、あなたはすべての要素に対してfloatとマージンのプロパティを設定することができ

.buttonClass { 

    @if $float == "right" { 

     $margin-left; 
    } @else { 

     $margin-right; 
    } 

} 

Answer 2

このミックスインを試みることができます。

@mixin set-button($float: null) { 
    @if ($float == right) or ($float == left) { 
    float: $float; 
    } 

    @if ($float == right) { 
    margin-left: 10px; 
    } @else { 
    margin-right: 10px; // default value 
    } 
} 

.but-1 { 
    @include set-button(right); 
} 

.but-2 { 
    @include set-button(); 
} 

.but-3 { 
    @include set-button(left); 
} 

.but-4 { 
    @include set-button(lol); 
} 

CSSの出力：

.but-1 { 
    float: right; 
    margin-left: 10px; 
} 

.but-2 { 
    margin-right: 10px; 
} 

.but-3 { 
    float: left; 
    margin-right: 10px; 
} 

.but-4 { 
    margin-right: 10px; 
} 

Sassmeister demo。