码迷,mamicode.com
首页 > Web开发 > 详细

scss-算术运算符

时间:2018-10-29 16:04:58      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:ase   编译报错   数值   不一致   执行   san   使用   运算   不执行   

  由于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-算术运算符

标签:ase   编译报错   数值   不一致   执行   san   使用   运算   不执行   

原文地址:https://www.cnblogs.com/ibabyli/p/9870678.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!