sass 运算符虽然没有像那些编程语言那么强大，但为了更灵活的输出css，也增强了一些运算符的功能，例如赋值运算符、等号操作符、比较运算符、逻辑运算符、字符串运算符...等等，接下来就来详细介绍下这些运算符的基本使用

赋值运算符

赋值运算符就是把一个值赋值给一个变量，通过冒号（：）的方式进行承接（很多编程语言是=），例如：

$font-size:16px;

也可以把一个变量赋值给另一个变量

$font-size:16px;$h3:$font-size;

赋值的变量必须先有值

等号操作符

等号操作符用于比较两个表达式的值是否相等，所有数据类型都支持等号运算符:

符号

说明

==

等于

!=

不等于

例1：数字比较：

$theme:1;.container {    @if $theme==1 {        background-color: red;    }    @else {        background-color: blue;    }}

例2：字符串比较：

$theme:"blue";.container {    @if $theme !="blue" {        background-color: red;    }    @else {        background-color: blue;    }}

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

比较运算符

比较运算符主要用于两个数值（整数与小数）间的比较，操作符有

符号

说明

< （lt）

小于

> （gt）

大于

<= （lte）

小于等于

>= （gte）

大于等于

例如

$theme:3;.container {    @if $theme >= 5 {        background-color: red;    }    @else {        background-color: blue;    }}

其它语言还有字符串的比较，但这里是不行的

逻辑运算符

逻辑运算符通常用于连接多个表达式，用下真判断条件是否成立，它们有and、or、not

符号

说明

and

逻辑与

or

逻辑或

not

逻辑非

例如

$width:100;$height:200;$last:false;div {    @if $width>50 and $height<300 {        font-size: 16px;    }    @else {        font-size: 14px;    }    @if not $last {        border-color: red;    }    @else {        border-color: blue;    }}

数字操作符通常是对数字（整数或小数）进行计算，但是某些操作符（/或+）会有特殊情况，后面分开详细讲解

符号

说明

+

加

-

减

*

乘

/

除

%

取模

例如

/*     +、-、*、/、%    线数字、百分号、css部分单位（px、pt、in...）    +    线数字与百分号或单位运算时会自动转化成相应的百分比与单位值*/.container {    /* ==================+ 运算===================== */    width: 50 + 20;    width: 50 + 20%;    width: 50% + 20%;    width: 10px + 20px;    width: 10pt + 20px;    width: 10pt + 20;    width: 10px + 10;    /* ==================- 运算===================== */    height: 50 - 30;    height: 10 - 30%;    height: 60% - 30%;    height: 50px - 20px;    height: 50pt - 20px;    height: 50pt - 40;    /* ==================* 运算===================== */    height: 50 * 30;    height: 10 * 30%;    /* height: 60% * 30%; 出现了两个百分号*/    /* height: 50px * 20px; 出现了两个单位*/    height: 50 * 2px;    height: 50pt * 4;    /* ==================/运算 (除完后最多只能保留一种单位)===================== */    $width: 100px;    width: 10 / 5;    width: 10px / 5px;    width: 10px / 10 * 2;    width: 20px / 2px * 5%;    width: ($width/2); // 使用变量与括号    z-index: round(10)/2; // 使用了函数    height: (500px/2); // 使用了括号    /* ==================% 运算===================== */    width: 10 % 3;    width: 50 % 3px;    width: 50px % 4px;    width: 50px % 7;    width: 50% % 7;    width: 50% % 9%;    width: 50px % 10pt; // 50px % 13.33333px      width: 50px % 13.33333px;    width: 50px + 10pt;    /* width: 50px % 5%; 单位不统一*/}

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

以下三种情况 / 将被视为除法运算符号：如果值或值的一部分，是变量或者函数的返回值如果值被圆括号包裹如果值是算数表达式的一部分

例如

$width: 1000px;div {    font: 16px/30px Arial, Helvetica, sans-serif; // 不运算    width: ($width/2); // 使用变量与括号    z-index: round(10)/2; // 使用了函数    height: (500px/2); // 使用了括号    margin-left: 5px + 8px/2px; // 使用了+表达式}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

字符串运算

+ 可用于连接字符串

注意：如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

有问题？？？？ 如果有一个值是函数返回的，情况可能不一样

例如

.container {    content: "Foo " + Bar;    font-family: sans- + "serif";}

运行符的基本操作就给大家介绍到这里，更多教程请关注“老姚实战营”。