【Sass学习笔记】005

【Sass学习笔记】005

五、Sass 的基本特性-运算

程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算，在接下来的章节中，主要和大家一起探讨有关于 Sass 中的数学运算。

1 加法

加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 20px + 8in;
}

编译出来的 CSS:

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 788px;
}

但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 20px + 1em;
}

编译的时候，编译器会报错：“Incompatible units: ‘em’ and ‘px’.”

代码示例：

代码语言：javascript代码运行次数：0运行复制

$sidebar-width: 220px;
$content-width: 720px;
$gap-width: 20px;

.container {
    width: $sidebar-width + $content-width + $gap-width;
    margin: 0 auto;
}

2 减法

Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：

代码语言：javascript代码运行次数：0运行复制

$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}

编译出来的 CSS 如下：

代码语言：javascript代码运行次数：0运行复制

.content {
  width: 760px;
}

同样的，运算时碰到不同类型的单位时，编译也会报错，如：

代码语言：javascript代码运行次数：0运行复制

$full-width: 960px;

.content {
  width: $full-width -  1em;
}

编译的时候，编译器报“Incompatible units: ‘em’ and ‘px’.”错误。

代码示例：

代码语言：javascript代码运行次数：0运行复制

$container: 960px;
$sidebar-width: 220px;
$gap-width: 20px;

.content{
    width: $container - $sidebar-width - $gap-width;
    float: left;
}

乘法

Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：

不能两个都带单位！

代码语言：javascript代码运行次数：0运行复制

.box {
  width:10px * 2px;  
}

编译的时候报“20px*px isn’t a valid CSS value.”错误信息。

如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 10px * 2;
}

编译出来的 CSS:

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 20px;
}

Sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。如下面的示例：

更不能两个都带单位，还带的是不同的单位！

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 20px * 2em;
}

编译时报“40em*px isn’t a valid CSS value.”错误信息。

4 除法

Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。一起先来看一个简单的示例：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 100px / 2;
}

编译出来的 CSS 如下：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 100px / 2;
}

这样的结果对于大家来说没有任何意义。要修正这个问题，只需要给运算的外面添加一个小括号**( )**即可：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: (100px / 2);  
}

编译出来的 CSS 如下：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 50px;
}

除了上面情况带有小括号，“/”符号会当作除法运算符之外，如果“/”符号在已有的数学表达式中时，也会被认作除法符号。如下面示例：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 100px / 2 + 2in;  
}

编译出来的CSS：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 242px;
}

另外，在 Sass 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示：

代码语言：javascript代码运行次数：0运行复制

$width: 1000px;
$nums: 10;

.item {cs
  width: $width / 10;
}

.list {
  width: $width / $nums;
}

编译出来的CSS:

代码语言：javascript代码运行次数：0运行复制

.item {
  width: 100px;
}

.list {
  width: 100px;
}

综合上述，”/ ”符号被当作除法运算符时有以下几种情况：

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 • 如果数值被圆括号包围。 • 如果数值是另一个数学表达式的一部分。

如下所示：

代码语言：javascript代码运行次数：0运行复制

//SCSS
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

编译出来的CSS

代码语言：javascript代码运行次数：0运行复制

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

Sass 的除法运算还有一个情况。我们先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: (1000px / 100px);
}

编译出来的CSS如下：

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 10;
}

代码示例：

代码语言：javascript代码运行次数：0运行复制

$width: 960px;

.col {
   width: $width / 10;
}

5 变量计算

在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算，其实在前面章节的示例中也或多或少的向大家展示了。在 Sass 中使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。一起来看一个简单的示例：

代码语言：javascript代码运行次数：0运行复制

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;

.container {
  width: $content-width + $sidebar-width + $gutter;
  margin: 0 auto;
}

编译出来的CSS

代码语言：javascript代码运行次数：0运行复制

.container {
  width: 960px;
  margin: 0 auto;
}

代码示例：

代码语言：javascript代码运行次数：0运行复制

$col-width: 60px;
$col-gap: 20px;

@for $i from 1 through 12 {
    .col-#{$i}{
        width:$col-width * $i + $col-gap * ($i - 1);
    }
}

6 数字运算

在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，一起来看个示例。

代码语言：javascript代码运行次数：0运行复制

.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}

编译出来的 CSS:

代码语言：javascript代码运行次数：0运行复制

.box {
  width: 60px;
}

上面这个简单示例是一个典型的计算 Grid 单列列宽的运算。

7 颜运算

所有算数运算都支持颜值，并且是分段运算的。也就是说，红、绿和蓝各颜分段单独进行运算。如：

代码语言：javascript代码运行次数：0运行复制

p {
  color: #01020 + #040506;
}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 0 + 06 = 09， 并且被合成为：

如此编译出来的 CSS 为：

代码语言：javascript代码运行次数：0运行复制

p {
  color: #050709;
}

算数运算也能将数字和颜值 一起运算，同样也是分段运算的。如：

代码语言：javascript代码运行次数：0运行复制

p {
  color: #01020 * 2;
}

计算公式为 01 * 2 = 02、02 * 2 = 04 和 0 * 2 = 06， 并且被合成为：

代码语言：javascript代码运行次数：0运行复制

p {
  color: #020406;
}

8 字符运算

在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如：

代码语言：javascript代码运行次数：0运行复制

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

编译出来的CSS：

代码语言：javascript代码运行次数：0运行复制

.box:before {
  content: " Hello Sass! ";
}

除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：

代码语言：javascript代码运行次数：0运行复制

div {
  cursor: e + -resize;
}

编译出来的CSS:

代码语言：javascript代码运行次数：0运行复制

div {
  cursor: e-resize;
}

注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：

代码语言：javascript代码运行次数：0运行复制

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译出来的 CSS：

代码语言：javascript代码运行次数：0运行复制

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

进阶篇地址：

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除前往查看变量编译学习笔记字符串sass