sass mixin 参数 - 检查模式

Question

如何检查传递给混入的所有参数是否具有相同的值？

伪代码：

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

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

Answer 1

Sass 支持布尔值的 and、or 和 not 运算符。

你可以做到

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

更多信息：Using multiple conditions (AND) in SASS IF statement

Answer 2

我委派了检查这些值是否等于 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 returns true 或 false 并且可以用于任意数量的参数

@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
  }
}

希望对您有所帮助

sass mixin 参数 - 检查模式

sass mixin parameters - check for patterns

sass

mixins