每日美图

介绍

任何语言中都会存在数据的运算，运算又分为数值运算和逻辑运算。今天我们学习数值运算的部分'+'、"-""、*"、"/"

简单四则运算

学习运算有一个小技巧，运算涉及到两个要素，变量和运算符，而这两者又都有类型之分。变量类型可以有Sass变量理解提到的的几种基本类型，有数字、字符串、颜色、空值
基本运算又有加减乘除，这两个元素在一起又会怎么样呢？一起来看看吧。

加/减/乘/除

数字

对于数字类型来说

• 参与加减乘除运算的数字只有一种单位则，没有单位的数字会自动转换为此种单位
• 参与加减乘除运算的数字存在两种或以上的不同的单位相加减会出问题如下

.calculator{

  $a : 1px;
  $b : 2;
  $c : 3rem;
  max-height: $a + $c;
  }

//Error: Incompatible units: 'rem' and 'px';

字符

• 字符与字符只有相加，没有相减，如果字符串之间相减如下

.calculator {
 data-name: "a"-"d";
}

• 字符与字符之间是不存在乘除操作的

//Error: Undefined operatio

• 字符串与数字相加减时数字会转换为字符串,没有乘除操作

颜色

• 16进制，短形式如#123，转换为#112233 继续进行正常的16进制加减乘除

.body{
 $color1 : #123;
 $color2 : #ff1234;
 background-color:$color1 +color2;
 }

.body{
background-color: #ff3467;
}

• 16进制与颜色类型和没有单位的数字是可以加减乘除，其他的基本类型都会报错。

空值

基本所有其他类型和null进行操作都报错，连null与null操作也是如此，各位读者也可以自己试试看的。

//Error: Invalid null operation: \"null plus null

总结

在文章最后，作者总结了这边文章中的要点，并整理为一张思维导读方便各位读者迅速理解文章，文章中代码可以点击该链接查看。今天是大年三十，祝福大家新年快乐，阖家欢乐，感谢读者的支持，作者一定会坚持持续为大家带来高质量的文章。

Saas基本变量类型运算