SASS wenn Funktion zur Überprüfung des Eigenschaftswerts

Question

Mit der Funktion SASS 'if() ist es möglich, nach einem Eigenschaftswert zu suchen? Z.B. Ich möchte eine button eine margin-right: 10px standardmäßig haben. Aber, wenn der Knopf float: right ist, möchte ich, dass der Rand margin-left: 10px ist.

So etwas wie unten:

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

Offensichtlich ist, dass die oben nicht (sonst würde ich hier schreibe nicht). Aber ist das möglich?

Answer 1

Es ist eine Weile her, dass ich so jede CSS Sachen tat dies weniger sein könnte, aber man konnte

.buttonClass { 

    @if $float == "right" { 

     $margin-left; 
    } @else { 

     $margin-right; 
    } 

} 

Answer 2

Diese mixin versuchen können Schwimmer und Randeigenschaften für jedes Element festgelegt.

@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 output:

.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.