【Sass学习笔记】005-Sass 的基本特性-运算

怼烎@ 2023-09-29 15:11 9阅读 0赞

### 文章目录 ###

*  五、Sass 的基本特性-运算
 *   *  1 加法
     *  2 减法
     *  3 乘法
     *  4 除法
     *  5 变量计算
     *  6 数字运算
     *  7 颜色运算
     *  8 字符运算

# 五、Sass 的基本特性-运算 #

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

## 1 加法 ##

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

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

编译出来的 CSS:

.box {
        
      width: 788px;
    }

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

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

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

代码示例：

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

## 2 减法 ##

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

$full-width: 960px;
    $sidebar-width: 200px;
    
    .content {
      width: $full-width -  $sidebar-width;
    }

编译出来的 CSS 如下：

.content {
        
      width: 760px;
    }

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

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

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

代码示例：

$container: 960px;
    $sidebar-width: 220px;
    $gap-width: 20px;
    
    .content{
        width: $container - $sidebar-width - $gap-width;
        float: left;
    }

## 3 乘法 ##

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

> **不能两个都带单位！**

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

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

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

.box {
        
      width: 10px * 2;
    }

编译出来的 CSS:

.box {
        
      width: 20px;
    }

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

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

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

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

## 4 除法 ##

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

.box {
      width: 100px / 2;
    }

编译出来的 CSS 如下：

.box {
      width: 100px / 2;
    }

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

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

编译出来的 CSS 如下：

.box {
        
      width: 50px;
    }

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

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

编译出来的CSS：

.box {
        
      width: 242px;
    }

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

$width: 1000px;
    $nums: 10;
    
    .item {cs
      width: $width / 10;
    }
    
    .list {
      width: $width / $nums;
    }

编译出来的CSS:

.item {
        
      width: 100px;
    }
    
    .list {
        
      width: 100px;
    }

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

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

如下所示：

//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

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

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

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

编译出来的CSS如下：

.box {
        
      width: 10;
    }

代码示例：

$width: 960px;
    
    .col {
       width: $width / 10;
    }

## 5 变量计算 ##

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

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

编译出来的CSS

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

代码示例：

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

## 6 数字运算 ##

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

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

编译出来的 CSS:

.box {
        
      width: 60px;
    }

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

## 7 颜色运算 ##

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

p {
      color: #010203 + #040506;
    }

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

如此编译出来的 CSS 为：

p {
        
      color: #050709;
    }