在 SCSS 中进行类型检查？

Question

基本上，我试图根据传入 SCSS 混入的值是偶数还是奇数来设置 CSS 值。

环顾四周，发现蹲得很慢。在带有 CSS/SCSS 的搜索词中提及奇数/偶数只会导致 :nth-child 结果。

余数运算符在 CSS 中不起作用，因此确定奇数/偶数的方法将不起作用。然后我尝试走下一条路线，其中数字除以 2 会导致数字类型或整数类型，具体取决于它是偶数还是奇数，不。

我唯一可行的选择似乎是

$valType1: "odd";

   @if $val1 == 2 {
    $valType1: "even";
  } @else if $val1 == 4 {
    $valType1: "even";
  } @else if $val1 == 6 {
    $valType1: "even";
  } @else if $val1 == 8 {
    $valType1: "even";
  } @else if $val1 == 10 {
    $valType1: "even";
  } @else if $val1 == 12 {
    $valType1: "even";
  } @else if $val1 == 14 {
    $valType1: "even";
  } @else if $val1 == 16 {
    $valType1: "even";
  } @else if $val1 == 18 {
    $valType1: "even";
  } @else if $val1 == 20 {
    $valType1: "even";
  } @else if $val1 == 22 {
    $valType1: "even";
  } @else if $val1 == 24 {
    $valType1: "even";
  } @else if $val1 == 26 {
    $valType1: "even";
  }

  @if $valType1 == "even" {
    background-color: red;
  }

一定有什么东西。有什么帮助建议吗？我是不是忽略了一些显而易见的事情？

Answer 1

这是 @function 的一个很好的用法，而不是 mixin。您可以为此使用 % modulo operator。

为清楚起见添加了 @mixin（以及另一个选项）。

@function evenOdd( $value) {
    $number : blue;
    
    @if ($value % 2 == 0) {
        $number : red 
    }
    
    @return $number;
}

@mixin evenOdd( $value ) {
    @if ($value % 2 == 0) {
        background-color: red;
    } @else {
        background-color: blue;
    }
}

.selector {
    background-color: evenOdd(2);
    /* compiles to red */
}

.selector {
    background-color: evenOdd(3);
    /* compiles to blue */
}

.selector {
    background-color: evenOdd(4);
    /* compiles to red */
}

/* MIXINS */
.selector {
    @include evenOdd(2);
    /* compiles to background-color: red */
}

.selector {
    @include evenOdd(3);
    /* compiles to background-color: blue */
}

您可以将其传递到 https://www.sassmeister.com/ - 并观看奇迹的发生。

Answer 2

Sass 支持数字运算符，因此您可以使用模来计算您的值的奇偶校验。

$valType1: "odd";

@if $val1 % 2 == 0 {
    $valType1: "even";
}

@if $valType1 == "even" {
    background-color: red;
}

在 SCSS 中进行类型检查？

Type check in SCSS?

css

sass