在 SCSS 中输入检查？答案

【问题标题】：Type check in SCSS?在 SCSS 中输入检查？
【发布时间】：2022-01-22 19:56:50
【问题描述】：

基本上，我试图根据传递给 SCSS mixin 的值是偶数还是奇数来设置 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;
  }

一定有什么。有什么帮助建议吗？我是否忽略了一些令人痛苦的显而易见的事情？

【问题讨论】：

$val1 来自哪里？它是可以在运行时更改的，还是仅对 SCSS 预处理器可用？
是mixin中定义的任意变量。 @mixin mixin-name($val1, $val2) { code } 然后称为@include mixin-name(23, 34)
因此，如果它从未暴露于 CSS，那么您无需担心“余数运算符在 CSS 中不起作用”。只需在 SCSS 中使用 % 运算符即可。

标签： css sass

【解决方案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/ - 并观看奇迹发生。

【讨论】：

【解决方案2】：

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

$valType1: "odd";

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

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

【讨论】：