Sass 中的操作符

相等操作符

== 、!=

根据以下规则判断两个值是否相等

• 数字相等：值一样且单位一致（或单位可以互相转换，并在转换为同个单位值后值相等；无单位数字与有单位数字永不相等）
• 字符串相等：内容一样（带引号与不带引号的两个值也相等）
• 颜色值相等：红、绿、蓝、透明度相等
• 数组相等：相同表达方式的数组，且每一项相等
• 对象相等：所有键的值都相等
• 真假值相等：true、false、null只会跟本身相等

@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true
@debug 1px == 1; // false

@debug "Helvetica" == Helvetica; // true
@debug "Helvetica" != "Arial"; // true

@debug hsl(34, 35%, 92.1%) == #f2ece4; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

@debug (5px 7px 10px) == (5px 7px 10px); // true
@debug (5px 7px 10px) != (10px 14px 20px); // true
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != [5px 7px 10px]; // true

$theme: ("venus": #998099, "nebula": #d2e1dd);
@debug $theme == ("venus": #998099, "nebula": #d2e1dd); // true
@debug $theme != ("venus": #998099, "iron": #dadbdf); // true

@debug true == true; // true
@debug true != false; // true
@debug null != false; // true

关系操作符

< 、<= 、 > 、 >=

无单位数字可以与任何数字进行比较。它们会自动转换为该数字的单位，无法比较两个不兼容单位的数字（注意与相等操作符区别）

@debug 100 > 50px; // true
@debug 10px < 17; // true

@debug 100px > 10s; // 报错

数学运算符

+ 、- 、* 、% ( 除：math.div() ) 无单位数字可以与任何单位的数字进行数学运算，它会自动转换为该数字的单位，两个不兼容单位的数字无法进行运算

@debug 100px + 50; // 150px
@debug 4s * 10; // 40s

@debug 100px + 10s; // 报错