SASS如果函数检查属性值

Question

使用SASS'if()函数，是否可以检查属性值？例如。我希望button默认有margin-right: 10px。但是，如果按钮是float: right，我希望保证金为margin-left: 10px。

类似下面：

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

显然，上述不起作用（不然我也不会在这里写）。但是，这可能吗？

Answer 1

这已经有一段时间，因为我没有任何的CSS的东西，所以这可能是少，但你可以尝试

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

demo Sassmeister。