相等运算符

// 数字具有相同的值和单位，或者单位相互转换后的值相等，则它们是相等的。
@debug 1px==1px; // true
@debug 1px !=1em; // true
@debug 1 !=1px; // true
@debug 96px==1in; // true in(英寸)

// 具有相同内容的不带引号和带引号的字符串被认为是相等的。
@debug "Helvetica" ==Helvetica; // true
@debug "Helvetica" != "Arial"; // true

// 颜色具有相同的红色、绿色、蓝色和 alpha 值，则它们是相等的。
@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

// true、false 和 null 只等于它们自己。
@debug true==true; // true
@debug true !=false; // true
@debug null !=false; // true

// 函数等于同一个函数。函数通过引用进行比较，因此即使两个函数具有相同的名称和定义，但如果它们未在同一位置定义，它们也会被视为不同。
@debug get-function("rgba")==get-function("rgba"); // true
@debug get-function("rgba") !=get-function("hsla"); // true

关系运算符

关系运算符确定数字是否大于或小于彼此。它们会自动在兼容单位之间进行转换。

@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true

// 无单位数可以与任何数字进行比较。它们会自动转换为该数字的单位。
@debug 100 > 50px; // true
@debug 10px < 17; // true

// 无法比较单位不兼容的数字。
// @debug 100px > 10s;

数字运算符

数字运算符包含加+，减-，乘*，除/与取模%

基本用法

// 纯数字相加
$plus1: 30 + 30; //60
$plus2: 30px + 30; //60px
$plus3: 30% + 30%; //60%
$plus4: 30px + 30pt; //70px
$plus5: 30px + 30pt + 30pc; //550px

//纯数字相减
$minus1: 60 - 30; //30
$minus2: 60px - 30; //30px
$minus3: 60% - 30%; //30%
$minus4: 60px - 30pt; //20px
$minus5: 60px - 30pt - 30pc; //-460px

//纯数字相乘
$multipl1: 60 * 30; //1800
$multipl2: 60px * 30; //1800px
$multipl3: 60% * 30; //1800%
$multipl4: 60px * 30 * 30; //54000px

//纯数字相除
$division1: (60 / 30); //2
$division2: (60px / 30); //2px
$division3: (60% / 30%); //2
$division4: (60px / 30pt); //1.5
$division5: (60px / 30 / 30); //0.06667px

//纯数字取模
$modulo1: 60 % 9; //6
$modulo2: 60px % 9; //6px
$modulo3: 60% % 9%; //6%
$modulo4: 60px % 9pt; //0px
$modulo5: 60px % 9 % 5; //1px

混合使用

字符串相加时，如果前面一个值带引号，计算的结果同样带引号，反之。

// 数字，字符串相加
$plus1: a + b; //ab
$plus2: "a" + "b"; //"ab"
$plus3: 'a' + 'b'; //"ab"
$plus4: 'a' + b; //"ab"
$plus5: a + 'b'; //ab
$plus6: 'a' + 1; //"a1"
$plus7: "1" + a; //"1a"

// 数字，字符串相减
$minus1: a - b; //a-b
$minus2: "a" - "b"; //"a"-"b"
$minus3: 'a' - 'b'; //"a"-"b"
$minus4: 'a' - b; //"a"-b
$minus5: a - 'b'; //a-"b"
$minus6: 'a' - 1; //"a"-1
$minus7: "1" - a; //"1"-a
$minus8: 1 - "a"; //1-"a"

// 数字无法与纯字符串相乘

// 数字无法与纯字符串相除

// 数字无法与纯字符串取模

除法运算情景

如果直接在值之间使用 / ，不可被视为除法运算，仅以下三种情况时会以除法进行运算：

• 如果值或值的一部分是变量或函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

$width: 100px;
div {
    width: $width / 2; //使用变量
    z-index: round($number: 10) / 2; //使用函数
    height: (500px / 2); //使用圆括号
    margin-left: 5px + 8/2; //使用了+表达式
}

编译后

div {
  width: 50px;
  z-index: 5;
  height: 250px;
  margin-left: 9px;
}

规则总结

• 运算符号与值之间建议使用空格隔开；
• 数字可以只声明其中一个符号或单位，计算的结果将以声明的符号或单位进行编译，声明单位或符号时，建议在第一个数字上进行声明；
• 当不同符号且符号之间不可以进行换算时，无法计算出结果，如 20px + 10%无计算，px + pt则可进行计算；
• 当不同单位进行运算，结果会显示以运算公式开头的数字设置的单位；
• 在乘法运算时，只需为一个数字声明单位，为多个数字声明同样或不同的单位都会报错；
• 在除法运算时，如需声明单位，单位建议标注在除号前面的值；
• 书写公式时，建议将所有公式都使用圆括号包裹。

书写建议

.plus {
    width: (30 + 30); // 60
    width: (30% + 30); // 60%
    width: (30px + 30pt); // 70px
    width: (30px + 30pt + 30pc); // 550px
}

.minus {
    width: (60 - 30); // 30
    width: (60% - 30); // 30%
    width: (60px - 30pt); // 20px
    width: (60px - 30pt - 30pc); // -460px
}

.multipl {
    width: (60 * 30); // 1800
    width: (60% * 30); // 1800%
    width: (60px * 30); // 1800px
    width: (60px * 30 * 30); // 54000px
}

.division {
    width: (60 / 30); // 2
    width: (60% / 30); // 2%
    width: (60px / 30); // 2px
    width: (60px / 30pt / 30); // 0.05
}

.modulo {
    width: (60 % 9); // 6
    width: (60% % 9); // 6%
    width: 60% % 9%; // 6%
    width: 60px % 6pt % 0.12; // 0.04px
}

字符运算符

• 字符相加，如果任一值是带引号的字符串，则结果将被引号。
• 字符相减，返回一个不带引号的字符串，其中包含两个表达式的值，由 - 分隔。这是一个遗留运算符，通常应改用插值法。

@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif
@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";

使用插值#{}创建字符串比依赖这些运算符通常更清晰明了。

布尔运算符

@debug not true; // false
@debug not false; // true

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

一些语言认为更很的值是false，而不仅仅是 false 和 null 。 Scss 不是那些语言之一！空字符串、空列表和数字 0 在 Sass 中都是真值。