数字

Sass支持标准组数学运营商的数量。它们自动在兼容单元之间转换。

SCSS  语法

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

Sass语法

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

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

SCSS  语法

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

Sass语法

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

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

SCSS  语法

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

Sass语法

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

一元运算符永久链接一元运算符

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

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

SCSS  语法

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

Sass语法

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

Head️抬头！

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

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

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

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

SCSS  语法

@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

Sass语法

@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>}。

SCSS  语法

@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 15px / 30px  // 15px/30px
@debug (10px + 5px) / 30px  // 0.5

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

SCSS  语法

@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语法

@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

Head️抬头！

由于CSS不支持正方形像素等复杂单位，因此将具有复杂单位的数字用作属性值会产生错误。但是，这是变相的功能；如果您没有找到正确的单位，那通常意味着您的计算有问题！请记住，您始终可以使用@debug规则检出任何变量或表达式的单位。

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

SCSS  语法

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

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

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秒，然后将其乘以过渡覆盖的像素数，以获取所需的时间。

SCSS  语法

$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);
}

Sass语法

$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;
}

Head️抬头！

如果您的算术给您错误的单位，您可能需要检查数学。您可能要放弃一定数量的单位！保持单元清洁可让Sass在出现问题时向您提供有用的错误。

您尤其应该避免使用像这样的插值法#{$number}px。这实际上并不会创建数字！它创建了一个加引号的字符串是看起来像一个数字，但不会有任何工作数量的操作或功能。尝试使数学单位整洁，以便$number已经具有该单位px，或者编写  $number * 1px。

Head️抬头！

Sass中的百分比与其他所有单元一样工作。它们不能与小数互换，因为在CSS中，小数和百分比表示不同的含义。例如，50%是以数字%为单位的数字，而Sass认为它与数字不同  0.5。

您可以使用单位算术在小数和百分比之间转换。$percentage / 100%将返回相应的小数，并$decimal * 100%返回相应的百分比。您也可以将math.percentage()函数用作更明确的编写方式  $decimal * 100%。