输入SCSS？

Question

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

做了一些环顾四周，发现有做蹲。在带有CSS/SCSS的搜索词中提到奇数/偶数，结果只是:nth-子结果。

余数运算符在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 (和另一个选项)。

​

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