Sass 运算符

Sass 方便您在样式表中进行基本的数学运算。应用适当的算术符号非常简单。

Sass 提供了一些标准的数学运算符，即 +、-、*、/ 和 %。

让我们举个例子，做一些简单的数学运算来计算 aside 和 article 的宽度。

SCSS 语法

等效 Sass 语法

这将创建一个非常简单的流体网格，基于 960px。Sass 运算会做类似的事情，即获取像素值并将它们转换为百分比，而无需太多麻烦。

它将生成这样的 CSS

Sass 运算符列表

1) 赋值运算符

在 Sass 中，冒号 (:) 运算符用于定义变量。

语法

2) 算术运算符

这些是用于执行算术运算的一些标准数学运算符。Sass 支持以下算术运算符。

算术运算符列表

重要事实

例如

例如

但 Sass 更喜欢使用正斜杠 (/) 来执行除法运算。让我们举个例子来看看 Sass 是如何理解这个符号的。

1. 加法 (+) 运算符也可以用于连接字符串，但它仅适用于具有兼容单位的数字。
2. 两个相同单位的数字相乘不是有效的 CSS
3. 除法运算符是 CSS 简写属性的组成部分。
4. Sass 遵循 BODMAS 公式中的运算符优先级。
   • 括号内的表达式首先被计算。
   • 乘法 (*) 和除法 (/) 运算符的优先级高于加法 (+) 和减法 (-) 运算符。

请看这个例子

3) 等式运算符

等式运算符用于条件语句中。这些运算符用于测试两个值是否相同，并返回布尔值。

Sass 支持以下等式运算符。

这些都支持所有类型。

让我们举两个例子来更好地理解它。等式运算符 (==) 用于第一个例子中测试 $font 参数的类型并打印适当的消息。

请看这个例子

生成的 CSS 将具有以下代码

第二个例子定义了一个列表并检查其项目的长度。这里，余数 (%) 运算符用于评估它们的长度，然后将 color 属性设置为 h2 元素。

请看这个例子

生成的 CSS 将具有以下代码

注意： Sass 不支持像其他语言那样的严格等式运算符 (===)。

4) 比较运算符

比较运算符类似于等式运算符，但它们仅用于比较数字。

Sass 支持的比较运算符列表

请看这个例子

编译后，生成的 CSS 将具有以下代码。

5) 逻辑运算符

逻辑运算符用于在条件表达式中测试多个条件。

Sass 支持的逻辑运算符列表

让我们举个例子来更好地理解它

此示例包含按钮状态作为键和相应的颜色作为值。然后，我们指定一个条件来评估它的长度。如果整个条件为真，则将背景颜色应用于 h2 元素。

Sass 语法