Scss----运算和语法

2020.12.14 06:30

01.数字运算符

SS支持数字的加减乘除、取整等运算(+, -, *, /, %)

• 如果必要会在不同单位间转换值
• 如果要保留运算符号，则应该使用差值语法

加+

• 纯数字
  $add1: 1 + 2; ==> 3
$add2: 1 + 2px;==> 3px
$add3: 1px + 2;==> 3px
$add4: 1px + 2px;==> 3px
• 纯字符串
  $str1: "a" + "b";==> "ab"
$str2: "a" + b;==> "ab"
$str3: a + "b";==> ab
$str4: a + b;==> ab
• 数字和字符串
  $add1: 1 + a;==> 1a
$add2: a + 1;==> a1
$add3: "1" + a;==> "1a"
$add4: 1 + "a";==> "1a"
$add5: "a" + 1;==> "a1"
$add6: a + "1";==> a1
$add7: 1 + "1";==> "11"

总结:

• 纯数字：只要有单位，结果必定有单位
• 纯字符串：第一个字符串有无引号决定结果是否有引号
• 数字和字符串：第一位有引号，结果必有引号；第一位对应数组且最后一位带有引号，则结果必由引号

减-

• 纯数字
  $add1: 1 - 2;==> -1
$add2: 1 - 2px;==>- 1px
$add3: 1px - 2;==> -1px
$add4: 1px - 2px;==> -1px
• 数字和字符串
  $add1: a - 1;==> a-1
$add2: 1 - a;==> 1-a
$add3: "a" - 1;==> "a"-1
$add4: a - "1";==> a-"1"

总结:

• 每个字段必须前部分为数组，且两个字段只能一个后部分是字符(因为此时后缀被当做单位看待了)
• 只要其中一个值首位不为数字的，结果就按顺序去除空格后拼接起来

乘*

• 纯数字
  $num1: 1 * 2;==> 2
$num2: 1 * 2px;==> 2px
$num3: 1px * 2;==> 2px
$num4: 2px * 2px;==> 编译不通过
• 数字和字符串
  $num1: 1 * 2abc;==> 2abc

<