Sass的运算符介绍和用法 _运算符

本文概述

1)赋值运算符
2)算术运算符
3)平等算子
4)比较运算符
5)逻辑运算符

Sass可以帮助你在样式表中进行基本的数学运算。应用适当的算术符号非常简单。
Sass提供了一些标准的数学运算符, 即+, -, *, /和％。
让我们以一个示例为例, 做一些简单的数学运算来计算预留和文章的宽度。
SCSS语法：

.container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; }

等效的Sass语法：

.container width: 100% article[role="main"] float: left width: 600px / 960px * 100% aside[role="complementary"] float: right width: 300px / 960px * 100%

这将基于960px创建一个非常简单的流体网格。 Sass操作将执行类似的操作, 例如获取像素值并将其转换为百分比, 而不会带来太多麻烦。
它将生成如下所示的CSS：

.container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; }

1)赋值运算符在Sass中, 冒号(：)运算符用于定义变量。
句法：

$main-color: lightpink;

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

operator	description
+	此运算符用于加法。
–	该运算符用于减法。
*	该运算符用于乘法。
/	该运算符用于除法。
%	该运算符用于余数。

重要事实：
加法(+)运算符还可用于连接字符串, 但仅适用于具有兼容单位的数字。
例如：

h2 { font-size: 15px + 2em; // Show error due to incompatible units font-size: 15px + 2; // 17px }

同一单位的两个数字相乘是无效的CSS：

h2 { font-size: 5px * 2px; // invalid CSS }

除法运算符是CSS速记属性的组成部分。
例如：

font: 16px / 24px Arial sans-serif; background: url("http://example.com") no-repeat fixed center / cover;

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

h2 { font-size: 16px / 24px // Outputs as CSS font-size: (16px / 24px) // Uses parentheses, does division font-size: #{$base-size} / #{$line-height}; // Uses interpolation, outputs as CSS font-size: $base-size / $line-height // Uses variables, does division opacity: random(4) / 5; // Uses a function, does division padding-right: 2px / 4px + 3px // Uses an arithmetic expression, does division }

Sass根据BODMAS公式遵循运算符优先级。

首先评估括号内的表达式。
乘法(*)和除法(/)运算符比加法(+)和减法(-)运算符具有更高的优先级。

请参阅以下示例：

h2 { width: 3px * 5 + 5px; // 20px width: 3 * (5px + 5px); // 30px width: 3px + (6px / 2) * 3; // 12px }

3)平等算子条件语句中使用等号运算符。这些运算符用于测试两个值是否相同, 并返回布尔值。
Sass支持以下相等运算符。

Operator	Description
= =	它等于运算符。
!=	它不等于运算符。

所有类型都支持这些。
让我们举两个例子来很好地理解它。第一个示例中使用等号运算符(==)测试$ font参数的类型并输出适当的消息。
请参阅以下示例：

@mixin font-fl($font){ & :after { @if(type-of($font) == string) { content: 'My font is: #{$font}.'; } @else { content: 'Sorry, the argument #{$font} is a #{type-of($font)}.'; } } } h2{ @include font-fl(sans-serif); }

生成的CSS将具有以下代码：

h2:after { content: 'My font is: sans-serif.'; }

第二个示例定义一个列表并检查其项目的长度。在这里, 余数(％)运算符用于评估其长度, 然后将color属性设置为h2元素。
【Sass的运算符介绍和用法】请参阅以下示例：

$list: "red", "yellow", "lightblue"; @mixin fg-color($property) { @each $item in $list { $color-length: str-length($item); @if( $color-length % 2 != 0 ) { #{$property}: unquote($item); } } } h2 { @include fg-color(color); }

生成的CSS将具有以下代码：

h2 { color: lightblue; }

注意：Sass不像其他语言那样支持严格相等运算符(===)。
4)比较运算符比较运算符类似于相等运算符, 但它们仅用于比较数字。
Sass支持的比较运算符列表：

Operator	Description
>	它指定一个大于比较运算符。
> =	它指定一个大于或等于比较运算符。
<	它指定一个小于比较运算符。
< =	它指定小于或等于比较运算符。

请参阅以下示例：

$padding: 50px; h2 { @if($padding < = 20px) { padding: $padding; } @else { padding: $padding / 2; } }

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

h2 { padding: 25px; }

5)逻辑运算符逻辑运算符用于测试条件表达式中的多个条件。
Sass支持的逻辑运算符列表：

Operator	Conditions	Description
And	x和y	如果x和y均为true, 则指定true。
Or	x或y	如果x或y为true, 则指定true。
Not	x	如果x不为真, 则为真。

让我们举个例子来很好地理解它：
本示例包含按钮状态作为键, 并包含相应的颜色作为值。然后, 我们指定一个条件以评估其长度。如果整个条件为真, 则将背景色应用于h2元素。
Sass语法：

$list-map: (success: lightgreen, alert: red, info: lightblue); @mixin button-state($btn-state) { @if (length($list-map) > 2 or length($list-map) < 5) { background-color: map-get($list-map, $btn-state); } } .btn { @include button-state(success); }