什么是 Sass 运算

发布时间：2023-05-26 13:25:55 所属栏目：教程来源：

导读：运算是一种通过已知量可能的组合，获得新的量的行为。Sass 中也为我们提供了各种各样的运算，以便我们更好的处理样式代码。本节我们将学习 Sass 中的数字运算、关系运算、除法运算、颜色运算、字符串运算等等&hellip

运算是一种通过已知量可能的组合，获得新的量的行为。Sass 中也为我们提供了各种各样的运算，以便我们更好的处理样式代码。本节我们将学习 Sass 中的数字运算、关系运算、除法运算、颜色运算、字符串运算等等…

什么是 Sass 运算？

运算从我们小时候就开始学习了，那在 Sass 中的运算是什么呢？
在我们写样式的时候，很多场景我们是需要用到计算的，而一般我们都是通过 javascript 来计算，CSS3 中也提供了用于运算的函数 calc() ，可能在工作中你使用过这个函数用来计算长度值，能用到的地方也非常有限。而在 Sass 中，扩展出了很多计算方法，使得你不止是可以计算长度值，还能做一些关系运算甚至颜色值的运算等等。这使我们可以把运算应用于更多的场景，来解决更复杂的问题，运算也是 Sass 的基本特性之一，下面我们一起来学习它～

语法示例

下面我们举几个简单的示例来感受下 Sass 的运算：

p {
width: px + px;
height:(px/);
&:before{
content: 'a' + 'b';
}
is: == ; // 仅作为示例，css和sass中无此属性
}
上面我们用了加法运算、除法运算、字符串运算和布尔值运算，转换为 CSS 的代码如下：

p {
width: px;
height: px;
is: true;
}
p:before {
content: "ab";
}
此时你可能不是很理解，没关系，下面我们开始逐一讲解～～

使用场景

这部分我们将详细讲解 Sass 运算中的：

数字运算

圆括号

除法运算

关系运算

颜色运算

字符串运算

布尔运算

数字运算

在 Sass 中我们可以对数字类型的值进行加减乘除、取整的运算。在使用运算的过程中，一定要注意不能使用不兼容的单位！（在除法运算中除外），什么意思呢？就是说两个数字相加，你不能一个数字单位是 px 另一个数字单位是 em 。还有一点需要注意的是，如果你使用乘法运算，你只需要为其中的一个数值写上单位就好。数值的运算包括加 (+)、减 (-)、乘 (*)、除 (/)、取模 (%)，乘法只需要有一个数值带单位即可，还有就是除法稍有特殊，后面会单独讲解，下面我来写一段代码看一下 Sass 的数字运算：

p {
width: px + px; // 加法运算 (不能使用不兼容的单位)
height: px +; // 加法运算无单位的数字可以与有单位的一起使用
max-width: px - px; // 减法
max-height: px * ; // 乘法，一个数值带单位即可
font-size: px ; // 模运算
}
上面这段代码转换成 CSS 为：

p {
width: px;
height: px;
max-width: px;
max-height: px;
font-size: px;
}
上面我们对 Sass 数值运算的加减乘和模运算做了演示，在 Sass 的数字运算中还有一个需要特别注意的：减法运算符两边需要加空格或者都不加空格，也就是说运算符的两边是对称的；为什么要这样呢？因为减法运算符 - 不仅仅表示减法，对于负数或者一元否定则只需要在其前面加空格就好，也就是说这个标识符还可以表示负数和一元否定；我们举个例子来看下：

p {
width: px - px; // 前后都有空格
width: px-px; // 前后都没有空格
width:px -px; // 只有前面有空格
}
上面这段 Sass 代码将会被编译成如下的 CSS :

p {
width: px;
width: px;
width: px -px;
}
我们可以看到上面的代码，如果你只在 - 标识符前面加了空格，其两边不对称是不会对数值进行运算的，所以这个在你写代码的过程中一定要注意！

圆括号

在讲除法运算之前，一定要先讲一下这个圆括号 () ，圆括号和数学运算中一样，可以来控制运算顺序，这个我们从小就学过，在 Sass 运算中你同样可以使用它来控制运算顺序。

另外就是如果你直使用除法运算符， Sass 会把这当成一个分隔符来处理，但如果你是写在圆括号内就可以被当作除法操作处理了，这也是圆括号在 Sass 中的另外一个作用！

除法运算

在 CSS 中，你要知道 / 这个标识符并不是代表除法的，一些 CSS 的属性值是支持使用 / 来分隔的，所以在 Sass 中直接使用 / 也是会当成分隔符来处理。但是呢，在以下情况下，Sass 将会把 / 视为除法运算：

运算符前后的值存储在变量中或由函数返回
运算符和前后的值被圆括号所包裹
值是另外一个表达式的一部分
下面我们来举例看一下：

$one: px / ;
$two: px;
p {
width: px + px / ; // 值是另外一个运算表达式的一部分
font-size: $one; // 前后的值存储在变量中或由函数返回
border-width: $two / ; // 前后的值存储在变量中或由函数返回
height: (px / ); // 被圆括号所包裹
max-width: px / ; // 会被当作分隔符来处理，而不是除法运算
}
上面这段 Sass 代码我对使用 / 的情况进行了注释，那么它转换为 CSS 代码是：

p {
width: px;
font-size: px;
border-width: px;
height: px;
max-width: px/;
}
上面我们看到了 Sass 除法运算的使用，还有一种情况是：假如我在两个变量之间使用 / 标识符，而且我又不想对这两个变量进行除法运算，我只是想对这两个变量的值进行分隔而已，那该怎么办呢？那我们需要使用插值 #{} 来将两个变量包裹住即可，关于插值以后的章节会有讲解，这里我们先看一下如何做：

$one: px;
$two: ;
p {
width: $one / $two; // 没有使用插值，会对变量值进行除法运算
height: #{$one} / #{$two}; // 使用插值，不会进行除法运算
}
上面这段使用插值的代码将会转换为如下的 CSS 代码：

p {
width: px;
height: px/;
}
好了，除法运算讲完了，通过上面的讲解，是不是感觉 Sass 中的除法运算和你脑海中的还是有差别的，还有一个值得注意的是，如果你使用除法运算前后的值都带有相同的单位，那么最后的结果是一个不带单位的数值。在以后你使用除法运算的时候一定要知道在 Sass 中 / 不仅仅代表除法运算，你要用正确的方式来使用它！

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!