• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 数字(Numbers)

    Sass 中的数字有两个组成部分:数字本身及其单位。例如,在 16px 中,数字是 16,单位是 px。数字可以没有单位,也可以有复杂的单位。

    @debug 100; // 100
    @debug 0.8; // 0.8
    @debug 16px; // 16px
    @debug 5px * 2px; // 10px*px (read "square pixels")
    

    SASS 数字支持与 CSS 数字相同的格式,包括科学记数法,它是用 e 数字和 10 的幂之间的一个写成的。由于浏览器对科学记数法的支持历来参差不齐,Sass 总是将其编译为完全扩展的数字。

    @debug 5.2e3; // 5200
    @debug 6e-2; // 0.06
    
    ⚠️注意!
    Sass 不区分整数和小数,因此例如math.div(5, 2)返回 2.5 而不是 2。这与 JavaScript 的行为相同,但与许多其他编程语言不同。


    单位

    Sass 对根据实际单位计算的工作方式操作单位提供了强大的支持。当两个数字相乘时,它们的单位也相乘。当一个数除以另一个数时,结果的分子单位取自第一个数,分母单位取第二个数。一个数字的分子或分母可以有任意数量的单位。

    @debug 4px * 6px; // 24px*px (read "square pixels")
    @debug math.div(5px, 2s); // 2.5px/s (read "pixels per second")
    
    // 3.125px*deg/s*em (read "pixel-degrees per second-em")
    @debug 5px * math.div(math.div(30deg, 2s), 24em); 
    
    $degrees-per-second: math.div(20deg, 1s);
    @debug $degrees-per-second; // 20deg/s
    @debug math.div(1, $degrees-per-second); // 0.05s/deg
    
    ⚠️注意!
    因为 CSS 不支持正方形像素这样的复杂单位,所以使用具有复杂单位的数字作为属性值会产生错误。不过,这是变相的功能;如果你没有得到正确的单位,这通常意味着你的计算有问题!请记住,您始终可以使用该@debug规则来检查任何变量或表达式的单位。

    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.
    

    与现实世界的单位计算一样,如果分子包含与分母中的单位兼容的单位(如math.div(96px, 1in)),它们将被抵消。这使得定义可用于单位之间转换的比率变得容易。在下面的示例中,我们将所需的速度设置为每 50 个像素一秒,然后将其乘以过渡覆盖的像素数以获得它应该花费的时间。

    scss 语句css 语句
    $transition-speed: math.div(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);
    }
    
    .slider {
      position: absolute;
      left: 10px;
      transition: left 2.2s;
    }
    .slider:hover {
      left: 120px;
    }
    
    ⚠️注意!
    如果你的算术给了你错误的单位,你可能需要检查你的数学。您可能会为应该拥有它们的数量而放弃单位!保持单元清洁允许 Sass 在出现问题时为您提供有用的错误。
    你应该特别避免使用像#{$number}px。这实际上并没有创建一个数字!它创建一个看起来像数字的不带引号的字符串,但不能与任何数字操作或函数一起使用。尝试使您的数学单元干净,以便已经拥有 unit ,或编写.$numberpx$number * 1px
    ⚠️注意!
    Sass 中的百分比与其他所有单元一样工作。它们不能与小数互换,因为在 CSS 中小数和百分比意味着不同的东西。例如,50%是一个以数字%为单位的数字,Sass 认为它与数字不同 0.5。
    您可以使用单位算术在小数和百分比之间进行转换。math.div($percentage, 100%)将返回相应的小数,$decimal * 100%并将返回相应的百分比。您还可以将math.percentage()函数用作更明确的书写方式$decimal * 100%


    精确

    Sass 数字支持小数点后最多 10 位的精度。这意味着一些不同的事情:

    • 只有小数点后的前十位数字会包含在生成的 CSS 中。
    • 如果两个数字在小数点后的第 10 位相同,则类似==<=的操作将认为它们是等价的。
    • 如果一个数字与整数的距离小于0.0000000001 整数,则对于list.nth()需要整数参数的函数而言,它被认为是整数。
    @debug 0.012345678912345; // 0.0123456789
    @debug 0.01234567891 == 0.01234567899; // true
    @debug 1.00000000009; // 1
    @debug 0.99999999991; // 1