测试4
测试大礼包
爬虫实战特训课

Sass 运算

1. 前言

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

2. 什么是 Sass 运算？

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

3. 语法示例

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

p {
  width: 9px + 10px;
  height:(600px/2);
  &:before{
    content: 'a' + 'b';
  }
  is: 1 == 1; // 仅作为示例，css和sass中无此属性
}

上面我们用了加法运算、除法运算、字符串运算和布尔值运算，转换为 CSS 的代码如下：

p {
  width: 19px;
  height: 300px;
  is: true;
}
p:before {
  content: "ab";
}

此时你可能不是很理解，没关系，下面我们开始逐一讲解～～

4. 使用场景

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

  • 数字运算

  • 圆括号

  • 除法运算

  • 关系运算

  • 颜色运算

  • 字符串运算

  • 布尔运算

4.1 数字运算

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

p {
  width: 10px + 20px; // 加法运算 (不能使用不兼容的单位)
  height: 500px +50; // 加法运算无单位的数字可以与有单位的一起使用
  max-width: 800px - 100px; // 减法
  max-height: 400px * 2; // 乘法，一个数值带单位即可
  font-size: 30px % 4; // 模运算
}

上面这段代码转换成 CSS 为：

p {
  width: 30px;
  height: 550px;
  max-width: 700px;
  max-height: 800px;
  font-size: 2px;
}

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

p {
  width: 10px - 5px; // 前后都有空格
  width: 10px-5px; // 前后都没有空格
  width:10px -5px; // 只有前面有空格
}

上面这段 Sass 代码将会被编译成如下的 CSS :

p {
  width: 5px;
  width: 5px;
  width: 10px -5px;
}

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

4.2 圆括号

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

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

4.3 除法运算

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

  • 运算符前后的值存储在变量中或由函数返回
  • 运算符和前后的值被圆括号所包裹
  • 值是另外一个表达式的一部分

下面我们来举例看一下：

$one: 20px / 2;
$two: 10px;
p {
  width: 200px + 100px / 10; // 值是另外一个运算表达式的一部分
  font-size: $one; // 前后的值存储在变量中或由函数返回
  border-width: $two / 5; // 前后的值存储在变量中或由函数返回
  height: (800px / 2); // 被圆括号所包裹
  max-width: 800px / 2; // 会被当作分隔符来处理，而不是除法运算
}

上面这段 Sass 代码我对使用 / 的情况进行了注释，那么它转换为 CSS 代码是：

p {
  width: 210px;
  font-size: 10px;
  border-width: 2px;
  height: 400px;
  max-width: 800px/2;
}

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

$one: 20px;
$two: 10;
p {
  width: $one / $two; // 没有使用插值，会对变量值进行除法运算
  height: #{$one} / #{$two}; // 使用插值，不会进行除法运算
}

上面这段使用插值的代码将会转换为如下的 CSS 代码：

p {
  width: 2px;
  height: 20px/10;
}

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

4.4 关系运算

在 Sass 中关系运算来比较数字与数字间的大小，和数字运算一样，关系运算也是不能使用不兼容的单位。关系运算的返回值是布尔值（ true 或 false ），下面我们举个例子看下：

p {
  width: 10px > 5px; // 大于
  width: 10 < 5px; // 小于
  width: 10 >= 5; // 大于等于
  width: 5 <= 5; // 小于等于
  width: 5 == 5; // 等于
}

在上面这个例子中，width 属性的值是没有布尔类型的，我这里这么举例子是为了让大家可以更直观的感受，一般关系运算不会直接应用于样式表中，在 Sass 的函数中应用的比较多。那么上面这段代码转换成 CSS 如下：

p {
  width: true;
  width: false;
  width: true;
  width: true;
  width: true;
}

到这里你应该了解 Sass 中的关系运算了，切记我这里的代码举例只是为了让大家直观的感受，实际情况下并不会这么写。另外在 Sass 中使用相等运算符去做比较的时候，对于数字类型，数字具有相同的值和相同的单位，或者在单位之间转换时它们的值相等，则它们是相等的；对于字符串类型，具有相同内容的未加引号和带引号的字符串被认为是相等的；对于颜色类型，具有相同的红色、绿色、蓝色和alpha值，则颜色是相等的；

4.5 颜色运算

What ？这个一眼看上去可能会感觉很"另类"，颜色要怎么运算呢？下面我们举个例子看一下：

body {
  color: #020304 + #050203;
}

在进行颜色值计算的时候是分段计算的，也就是 02 + 05 、03 + 02 、04 + 03，我们知道十六进制颜色值是分为三组的（两个数字一组），分别代表红、绿、蓝，所以在做运算的时候也是按照这个来运算的，那么上面这段代码转换成 CSS 为：

body {
  color: #070507;
}

上面我们讲了颜色运算，但是 Sass 官方给出了明确的说明：不推荐使用颜色运算，而使用颜色函数。什么原因呢？因为 Sass 颜色运算所产生出来的色值可能和你感知的并不一致，所以不推荐使用。如果你使用了的话， Sass 也是支持的，但是会给出警告，强烈建议用户避免使用颜色运算！所以我们的教程里只是做了个演示，你可以了解下，但在实际开发中不推荐使用颜色运算，可以使用颜色函数来实现你的需求！

4.6 字符串运算

在 Sass 中还允许对字符串进行运算，那对于字符串的运算都有哪些呢？我们先文字描述下：

  • 字符串1 + 字符串2：用于连接字符串，结果会返回包含两个字符串的新字符串，如果这其中一个字符串带引号，那么结果也会带引号，否则就不带引号（带引号的字符串要位于 + 号左侧）；
  • 字符串1 / 字符串2：返回一个字符串，这里包含字符串 1 和 字符串 2 ，会用 / 分隔；
  • 字符串1 - 字符串2：返回一个字符串，这里包含字符串 1 和 字符串 2 ，会用 - 分隔。

下面我们使用代码来举例看下：

p {
  color: r + 'ed'; // 带引号的在加号右侧，返回一个不带引号的字符串
  color: 'r' + ed; // 带引号的在加号左侧，返回一个带引号的字符串
  color:r + ed; // 返回一个不带引号的字符串
  color: r/ed; // 返回一个使用 / 分隔的字符串
  color: r-ed; // 返回一个使用 - 分隔的字符串
}

上面这段代码会转换为如下的 CSS 代码：

p {
  color: red;
  color: "red";
  color: red;
  color: r/ed;
  color: r-ed;
}

同样此处举的例子只是为了方便大家感受，实际应用时可能并不会写这么多 color 属性，字符串运算可以让你很方便的拼接一些字符串来使用。

4.7 布尔运算

可能与其他的语言不太相同，Sass 中的布尔运算使用的不是运算符而是单词，所以 Sass 中的布尔运算是 not 、and 和 or，not 的意思是取反，and 的意思是两个都为真则返回真反之则返回假，or 的意思是其中一个为真则返回真。看到这你可能懂了，这不就是我们常说的逻辑非、逻辑与和逻辑或嘛，下面我们举个例子来看下：

{
  a: true and true;
  b: true or false; 
  c: true and false;
  d: not false;
}

那么上面这段代码在 Sass 中会转换为：

{
  a: true;
  b: true;
  c: false;
  d: true;
}

布尔运算在实际写样式的时候基本是不会用到的，大家也不会直接在样式中应用，一般布尔运算会应用在 Sass 函数中。

5. 实战经验

上面讲了这么多，现在该说到实战了。在实际的项目开发中，可能最最常用的就是加减乘除的运算了，有时可能会用到字符串运算。在你写 CSS 的时候，相信你一定知道 rem 布局，这个简直太常用了。我们在做 rem 布局的时候经常会设置一个根元素的字体大小，然后其余所有的像素可能都根据这个去计算，所以为了便于维护，我把这个根元素的大小抽离出来作为一个变量，然后在每个元素的样式中对这个变量进行运算就可以了，同时呢，我们还可以在动画中运用一些运算，我们一起来看下：

$root: 28;

html {
  font-size: $root+px;
}
p {
  width: (460rem / $root);
  height: (320rem / $root);
}

@keyframes sacle {
  0% {
    width: (800px - $root);
  }
  50% {
    width: 800px - $root * 2;
  }
  100% {
    width: (800px / $root);
  }
}

上面这段代码我们动态的计算了 rem 还有动画中的一些需要的运算。而且这样做的好处是我们可以随时按需更改变量而不需要重新把没处样式都再手动进行更改，这样就让项目的代码更具有扩展性并且更易于维护。它将会被转换为如下的 CSS 代码：

html {
  font-size: 28px;
}

p {
  width: 16.4285714286rem;
  height: 11.4285714286rem;
}

@keyframes sacle {
  0% {
    width: 772px;
  }
  50% {
    width: 744px;
  }
  100% {
    width: 28.5714285714px;
  }
}

在我们的项目中，我们会把 $root 这个变量抽出来到专门维护变量的文件中，然后供项目中所有的页面做运算使用。

6. 小结

本节教程我们讲解了 Sass 中的运算以及运算的应用，我们回忆一下都有哪些运算：
图片描述

在编写样式的时候加减乘除运算可能会应用的比较多，而字符串运算、布尔值运算、关系运算在 Sass 函数中应用比较多，后面的章节我们会讲解 Sass 函数，而颜色运算官方已经不推荐大家使用了，取而代之的是颜色函数，所以这里我们也尽量不要使用颜色运算了。

在 CSS 中的某些需要你自己计算的值你可以尝试使用 Sass 运算来提升你的开发效率，而且像一些经常使用到的运算完全可以抽离出来统一维护，这样项目会更加易于维护，管理起来也更清晰！Sass 的运算我个人认为是一个能特别提升开发 CSS 效率的扩展功能。