scss-算术运算符

　　由于scss具有编程语言的特点，那么运算符是必不可少的。

　　下面就通过代码实例分别做一下介绍。

　　一.赋值运算符:

　　赋值运算符就是我们最为熟悉的冒号（:），用来给声明的变量赋值。

　　代码实例如下:

$highlight-color: #F90;

　　二.算数运算符:

　　在scss中，算数运算符包括加减乘程序和求余，分别用如下符号表示:

+、-、*、/和%

　　算数运算符只能够用于相同单位的数值运算。

　　加法运算符的代码实例:

div {

  /*单位不一致，编译报错*/

  font-size: 5px + 2em;

  /*7px，如果有一个操作数没有单位，则默认使用另一个操作数的单位。*/

  font-size: 5px + 2;

}

　　乘法运算符的代码实例:

div {

  font-size: 5px * 2;

  /*具有相同单位的数值相乘会报错*/

  font-size: 5px * 2px;

}

　　除法运算符（/）需要特别注意一下，因为除法运算符本身也是css语法的一部分。

　　代码实例如下:

font: 16px / 24px Arial sans-serif;

　　下面就来介绍一下在scss中，哪些情况会被认为是除法运算，哪些情况被认为是css原生语法。

　　代码如下:

div {

  /*不执行除法操作，原样输出*/

  font-size: 16px / 24px;

  /*使用插值语法之后，原样输出*/

  font-size: #{$base-size} / #{$line-height};

  /* 使用括号包裹之后，执行除法操作*/

  font-size: (16px / 24px);

  /* 使用变量，执行除法操作*/

  font-size: $base-size / $line-height;

  /* 调用函数，执行除法操作*/

  opacity: random(4) / 5;

  /* 使用算术操作符，执行除法操作*/

  padding-right: 2px / 4px + 3px;

}

　　scss中的算数运算符和普通算数运算符一样，也具有优先级概念:

　　（1）.乘除法的优先级要高于加减法。

　　（2）.小括号中的运算具有最高优先级。

巴特西

scss-算术运算符

最新文章

热门文章