Sass 操作符

Sass 支持一些有用的运算符来处理不同的值。其中包括标准数学运算符，如 + 和 *，以及各种其他类型的运算符：

• ==和!=用于检查两个值是否相同。
• +，-，*，/，并%有数字他们通常的数学含义，同时，对于在科学的数学使用单位的一致单位特殊行为。
• <，<=，>，并>=检查是否两个数字都大于或小于另一个。
• and，or和not具有通常的布尔行为。Sass认为除false 和之外的每个值都是“ true” null。
• +，-和/可用于连接字符串。

操作符优先级

Sass 操作符优先级，从高到低：

1. 一元运算符 not, +, -, 和 /
2.  *, /, 和 % 
3. + 和 - 
4.  >, >=, <  和 <= 
5. ==  和!= 
6. and
7. or
8. = 运算符（如果可用）

@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true

括号

您可以使用括号显式控制操作顺序。括号内的运算始终要先进行括号外的运算。甚至可以嵌套括号，在这种情况下，将首先评估最里面的括号：

@debug (1 + 2) * 3; // 6
@debug ((1 + 2) * 3 + 4) * 5; // 65

单个 = 号

Sass支持=仅在函数参数中允许的特殊运算符，该运算符仅创建一个无引号的字符串，其两个操作数之间用分隔=。存在此点是为了与非常老的IE- only语法向后兼容。

.transparent-blue {
  filter: chroma(color=#0000ff);
}

编译为 CSS 结果：

.transparent-blue {
  filter: chroma(color=#0000ff);
}

等式

如果两个值具有相同的类型和相同的值，则它们被视为相等，不同类型的事物具有不同的含义：

• 如果数字具有相同的值和相同的单位，或者当它们的单位彼此转换时它们的值相等，则数字相等。
• 字符串是不寻常的，因为具有相同内容的无引号和带引号的字符串被视为相等。
• 如果颜色具有相同的红色、绿色、蓝色和 alpha 值，则颜色相等。
• 如果列表的内容相等，则列表相等。逗号分隔的列表不等于空格分隔的列表，带括号的列表不等于不带括号的列表。
• 如果映射的键和值都相等，则映射相等。
• true、false和null 只等于它们自己。
• 函数等于相同的函数。函数是通过引用进行比较的，因此即使两个函数具有相同的名称和定义，如果它们未在同一位置定义，它们也会被视为不同。

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

@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 get-function("rgba") == get-function("rgba"); // true
@debug get-function("rgba") != get-function("hsla"); // true

关系运算符

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

• <expression> < <expression>返回第一个表达式的值是否小于第二个表达式的值。
• <expression> <= <expression>返回第一个表达式的值是否小于或等于第二个表达式的值。
• <expression> > <expression>返回第一个表达式的值是否大于第二个表达式的值。
• <expression> >= <expression>，返回第一个表达式的值是否大于或等于第二个表达式的值。

@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;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

数字运算符

Sass 支持数字的标准数学运算符集。它们会自动在兼容单位之间转换。

• <expression> + <expression> 加法。
• <expression> - <expression> 减法。
• <expression> * <expression> 乘法。
• <expression> / <expression> 除法。
• <expression> % <expression> 取模运算符。

@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug (12px/4px); // 3
@debug 1in % 9px; // 0.0625in

无单位编号可以与任何单位的编号一起使用。

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

单位不兼容的数字不能加，减或取模。

@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

一元运算符

您还可以编写+和-作为一元运算符，它们仅采用一个值：

• +<expression> 返回表达式的值而不更改它。
• -<expression> 返回表达式值的负数形式

@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px

注意：

因为-可以同时表示减法和一元否定，所以在以空格分隔的列表中哪个是混淆的。为了安全起见：

• -减法时，请始终在两边都写空格。
• -对于负数或一元负数，请在空格前而不是空格后写一个空格。
• 如果用空格分隔列表，则将一元负号括在括号中。

-Sass中不同的含义按以下顺序优先：

1. -作为标识符的一部分。唯一的例外是单位；Sass通常允许将任何有效的标识符用作标识符，但是单位不得包含连字符和数字。
2. - 在表达式和没有空格的文字数之间，该文字数被解析为减法。
3. - 在文字数的开头，该文字数被解析为负数。
4. - 不管空格如何，两个数字之间都将被解析为减法。
5. - 在非文字数（解析为一元负数）的值之前。

@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3

$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3

斜杠

一些CSS属性支持/将值分开。这意味着Sass必须在/属性值和/划分之间进行区分。为了使此工作有效，如果满足两个条件之一/，则Sass将结果以斜杠分隔而不是除法打印，除非满足以下条件之一：

• 任一表达式都不是文字数字。
• 结果存储在变量中或由函数返回。
• 该操作用括号括起来，除非这些括号在包含该操作的列表之外。
• 结果被用作其他操作的一部分（除外  /）。

如果要强制/用作分隔符，可以将其编写为#{<expression>} / #{<expression>}。

@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug #{10px + 5px} / 30px; // 15px/30px

$result: 15px / 30px;
@debug $result; // 0.5

@function fifteen-divided-by-thirty() {
  @return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5

@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5

单位

Sass根据实际单位计算的工作方式为操纵单位提供强大的支持。当两个数字相乘时，其单位也将相乘。当一个数字除以另一个时，结果从第一个数字获取其分子单位，从第二个数字获取其分母单位。一个数字在分子和/或分母中可以具有任意数量的单位。

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug 5px / 2s; // 2.5px/s (read "pixels per second")
@debug 5px * 30deg / 2s / 24em; // 3.125px*deg/s*em
                                // (read "pixel-degrees per second-em")

$degrees-per-second: 20deg/1s;
@debug $degrees-per-second; // 20deg/s
@debug 1 / $degrees-per-second; // 0.05s/deg

Sass会自动在兼容的单位之间转换，尽管它会选择哪个单位作为结果取决于您使用的Sass实现。如果尝试组合不兼容的单位（如）1in + 1em，Sass会抛出错误。

// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

与实际单位计算一样，如果分子包含与分母中的单位兼容的单位（如96px / 1in），它们将被抵消。这样可以轻松定义可用于单位之间转换的比率。在下面的示例中，我们将所需速度设置为每50像素1秒，然后将其乘以过渡覆盖的像素数，以获取所需的时间。

$transition-speed: 1s/50px;

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

编译为 CSS 结果：

.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}

字符串操作符

• <expression> + <expression>返回一个包含两个表达式值的字符串。如果其中一个值是带引号的字符串，则结果将被带引号；否则，它将被取消报价。
• <expression> / <expression>返回一个无引号的字符串，其中包含两个表达式的值，以分隔  /。
• <expression> - <expression>返回一个无引号的字符串，其中包含两个表达式的值，以分隔-。这是一个传统运算符，通常应使用插值法。

@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug #{10px + 5px} / 30px; // 15px/30px
@debug sans - serif; // sans-serif

这些运算符不仅仅适用于字符串！它们可以与可以写入CSS的任何值一起使用，但有一些例外：

• 数字不能用作左侧的值，因为它们有自己的运算符。
• 颜色不能用作左侧的值，因为它们曾经有自己的运算符。

@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";

使用插值来创建字符串通常比使用此运算符更简洁明了。

一元运算符

由于历史原因，Sass还支持/并且-作为一元运算符，它们仅取一个值：

• /<expression>返回一个无引号的字符串/，该字符串以表达式的值开头，后跟表达式的值。
• -<expression>返回一个无引号的字符串-，该字符串以表达式的值开头，后跟表达式的值。

@debug / 15px; // /15px
@debug - moz; // -moz

布尔运算符

与JavaScript之类的语言不同，Sass的布尔运算符使用单词而不是符号。

• not <expression>返回表达式的值的相反：它变成true入false和false成  true。
• <expression> and <expression>true如果两个表达式的值均为true，false则  返回false。
• <expression> or <expression>true如果任一表达式的值均为true，并且false两者均为，则  返回false。

@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

存在

任何地方true或者false是允许的，可以使用其它值。值false和null是falsey，其他所有值都被认为是true。

例如，如果要检查字符串是否包含空格，则只需编写即可string.index($string, " ")。如果找不到字符串，则 返回该string.index()函数null，否则返回数字。