首页 > 技术文章 > Scss基本运算-------数字运算

hou-yuan-zhen 2019-10-08 10:37 原文

在Sass中,共有4种数字运算:

 1.加法:在Sass中,做加法运算时,数值可以带单位,但是需要运算单位相同。如果不相同就会报错,编译不通过。

  实例:

        $sidebar-width:220px;

  $content-width:720px;
  $gap-width:20px;
  .container
  {
    width: ($sidebar-width + $content-width + $gap-width)
    margin: 0 auto;
  }
编译出来的css代码是:
  .container
  {
    width:960px;
    margin:0 auto;
  }
2.减法:跟Sass加法是一样的,做减法运算时,数值可以带单位,但是需要运算单位相同。如果不相同就会报错,编译不通过。
 需要注意的是:如果是做减法运算是“变量”而不是“数值”的时候,我们要注意减号“-”前后一定要有空格。不过对于Sass中的加法,则不需要考虑这一点。
3.乘法:做乘法运算时,只能有一个数值带单位,另外一个数值只能是不带单位的数字。如果两个都是带单位的数字,则Sass会报错而编译不通过。
4.除法:“/”在CSS中已经作为一种符号来使用了,例如我们常见的字体属性缩写“font:Arial 12px/1.5em”。因此在Sass中做除法运算的时候,如果我们直接使用“/”符号作为除号,将不会生效。因此在Sass中,如果我们想要做除法运算,我们需要在外面添加一个“小括号()”。
    实例:
    $width:100px;
    div
    {
      width:($width/2);
    }
   编译出来的css代码:
    div
    {
      width:50px;
    }
  在Sass中,如果做除法运算中是“变量”而不是“数值”时,“/”会被自动识别为除法,不需要在外面添加小括号。
注意:在使用Sass的过程中,“/”这个符号被当做除法运算时有以下3种情况
          (1)数值被小括号()包含;

   (2)数值是另外一个数学表达式的一部分;

   (3)数值或它的任意部分存储在一个变量中或者函数的返回值;

    举例:
     $height:100px;
    div
    {
    font:20px/10px;               //纯CSS,不是除法运算
    width:(20px/10px);             //使用了小括号,是除法运算,符合第1点
    height:$height/2;              //使用了变量,是除法运算,符合第3点
    line-height:round(1.5)/2;       //使用了函数,是除法运算,符合第3点
    margin-left:10px + 10px/2px;      //使用了加号,是除法运算,符合第2点
    }
编译出来的css代码如下:
    div
    {
    font: 20px/10px;
    width: 2;
    height: 50px;
    line-height: 1;
    margin-left: 15px;
    }
但是注意:在实际开发中,不管是加法、减法,还是乘法、除法运算建议在外面加上小括号。这种书写方式,能够使得代码一目了然,也方便维护
      

推荐阅读