sass mixin參數 - 檢查模式

Question

如何檢查傳遞給mixin的所有參數是否都是相同的值？

僞代碼：

@mixin cols($width...) { 
    @if (all $width values are the same) { 
    // do something 
    } 
} 

.three-cols { 
    @include cols(4,4,4); 
} 

Answer 1

我委託檢查，看看是否值等於function然後可以從mixin，使他們都被稱爲任務有單一的責任。

@function check_values($values...) { 
    $counter: 0; 
    @if (nth($values, 1) != nth($values,2)) { 
    $counter: 0; 
    } 
    @else { 
    $counter: $counter + 1; 
    @for $i from 2 to length($values) { 
     $counter: if(nth($values, $i) == nth($values, $i + 1), $counter + 1, $counter); 
    } 
    } 
    @return if($counter + 1 == length($values), true, false) 
} 

的function返回或者真正或假，可以在任意數量的ARGS

@debug check_values(2,2,1,1,2,2); //false 
@debug check_values(2,2,2); //true 
@debug check_values(2,2,2,1); //false 

的function只需要在mixin

@mixin cols($width...) { 
    @if (check_values($width...)) { 
    // do something 
    } 
} 

被稱爲中使用

希望這會有所幫助

Answer 2

薩斯支持and，or，並not操作者爲布爾值。

你可以做

@if ($width_1 == $width_2 and $width_2 == $width_3){ 
    // do something 
} 

這裏更多：Using multiple conditions (AND) in SASS IF statement