Scss基本运算-------数字运算
在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:0auto;
  }
2.减法：跟Sass加法是⼀样的，做减法运算时，数值可以带单位，但是需要运算单位相同。如果不相同就会报错，编译不通过。
需要注意的是：如果是做减法运算是“变量”⽽不是“数值”的时候，我们要注意减号“-”前后⼀定要有空格。不过对于Sass中的加法，则不需要考虑这⼀点。
3.乘法：做乘法运算时，只能有⼀个数值带单位，另外⼀个数值只能是不带单位的数字。如果两个都
是带单位的数字，则Sass会报错⽽编译不通过。
css变量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;
    }
但是注意：在实际开发中，不管是加法、减法，还是乘法、除法运算，建议在外⾯加上⼩括号。这种书写⽅式，能够使得代码⼀⽬了然，也⽅便维护。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。