SASS | 数字运算符

在SASS中，可以使用数字运算符对数字类型的值进行算术运算。这些运算符包括+、-、*和/。

加（+）

加法运算符可以将两个数字相加。例如，以下代码将把$a和$b的值相加，并将结果分配给$c变量。

$c: $a + $b;

您还可以在数学表达式中使用加法运算符。例如，以下代码将在屏幕上打印出10。

$width: 5;
$padding: 5;
$total: $width + $padding;
body {
  width: $total + "em";
}

减（-）

减法运算符可以将一个数字从另一个数字中减去。例如，以下代码将把$b的值从$a中减去，并将结果分配给$c变量。

$c: $a - $b;

您还可以在数学表达式中使用减法运算符。例如，以下代码将在屏幕上打印出5em。

$width: 10;
$padding: 5;
$total: $width - $padding;
body {
  width: $total + "em";
}

乘（*）

乘法运算符可以将两个数字相乘。例如，以下代码将把$a和$b的值相乘，并将结果分配给$c变量。

$c: $a * $b;

您还可以在数学表达式中使用乘法运算符。例如，以下代码将在屏幕上打印出50px。

$width: 10px;
$multiplier: 5;
$total: $width * $multiplier;
body {
  width: $total;
}

除（/）

除法运算符可以将一个数字除以另一个数字。例如，以下代码将把$a的值除以$b，并将结果分配给$c变量。

$c: $a / $b;

您还可以在数学表达式中使用除法运算符。例如，以下代码将在屏幕上打印出2em。

$width: 10;
$divider: 5;
$total: $width / $divider;
body {
  width: $total + "em";
}

整除（//）

整数除法运算符是一个双斜杠。它返回两个数字相除的整数部分。例如，以下代码将把$a的值除以$b，并返回除法的整数部分。

$c: $a // $b;

以下是整数除法运算符的几个示例。

// 返回值为：5
$c: 10 // 2;

// 返回值为：2
$c: 5 // 2;

// 返回值为：4
$c: 10 // 2.5;

// 返回值为：-5
$c: -10 // 2;

取模（%）

取模运算符是一个百分号。它返回两个数字相除的余数。例如，以下代码将把$a的值除以$b，并返回除法的余数。

$c: $a % $b;

以下是取模运算符的几个示例。

// 返回值为：0
$c: 10 % 2;

// 返回值为：1
$c: 5 % 2;

// 返回值为：0.5
$c: 10 % 2.5;

// 返回值为：-2
$c: -10 % 3;

在这种情况下，我们不能在body的宽度中使用sass的变量。

body {
  width: calc(100% / 3);
}

这会导致编译错误。我们应该使用以下代码。

$total: 3;
body {
  width: calc(100% / #{$total});
}

结论

以上就是SASS中数字运算符的详细介绍。您可以使用这些运算符在SASS中执行算术运算。这是一个非常有用的功能，可以使您的SASS样式更加灵活，更健壮。