SASS - 操作符

Posted 2020-11-16 haibianren

---

• SASS – 简介
• SASS – 环境搭建
• SASS – 使用Sass程序
• SASS – 语法
• SASS – 变量
• SASS- 局部文件(Partial)
• SASS – 混合(Mixin)
• SASS – @extend（继承）指令
• SASS – 操作符
• SASS – 函数
• SASS – 输出格式

---

本文介绍Sass操作符（或运算符）。包括加法、减法、除法、等号操作符等。

等号操作符

所有数据类型都支持等号运算符:

==	等于
!=	不等于

除了等号运算符之外，每种数据类型还支持各自的一组操作符。

数字操作符

SassScript支持以下标准的算术操作符:

+	加
-	减
*	乘
/	除
%	取模

算术运算符的一个常见用法是宽度计算。

例如，下面的例子计算宽度百分比：

.container { 
    width: 100%; 
}

article {
    float: left;
    width: 700px / 960px * 100%;
}

.sidebar {
    float: right;
    width: 200px / 960px * 100%;
}

经过编译输出以下CSS代码：

.container {
  width: 100%; }

article {
  float: left;
  width: 72.91667%; }

.sidebar {
  float: right;
  width: 20.83333%; }

使用算术操作符时，参与运算的数据单位必须相同。否则会报错(例如，一个用px，另一个用em)：

 .box-big {
        font-size:  22px + 4em; // Error: Incompatible units: 'em' and 'px'.
        width: 30% - 20px; // Error: Incompatible units: 'px' and '%'.
    }

颜色操作符

算术操作符也适用于颜色。计算颜色时，参与运算的是R, G, B分量，而不是整个六位数颜色值。

例如，当把两个十六进制颜色值相加时，将依次把每一对分量值相加。

示例：

body {
    color: #991100 + #002299;
}

经过编译输出以下CSS代码：

body {
  color: #993399; }

还可以对颜色和数字应用运算符。例如

body {
    color: #112233 * 2;
}

经过编译输出以下CSS代码：

body {
  color: #224466; }

字符串操作符

+操作符还可以用来连接字符串。

img {
  cursor: zoom + -in;
}

经过编译输出以下CSS代码：

img {
  cursor: zoom-in; }

逻辑运算符

Sass还支持对布尔值使用and、or和not等运算符。