数字

2018-02-24 15:11 更新

在 Sass 中,数字类型包括了长度、持续时间、频率、角度等等无单位数字类型。Sass 允许在运行中计算这些度量值。

零值

当数字小于 1 时,应该在小数点前写出 0. 永远不要显示小数尾部的 0

// Yep
.foo {
  padding: 2em;
  opacity: 0.5;
}

// Nope
.foo {
  padding: 2.0em;
  opacity: .5;
}

单位

当定义长度时,0 后面不需要加单位。

// Yep
$length: 0;

// Nope
$length: 0em;

在 Sass 中最常见的错误,是简单地认为单位只是字符串,认为它会被安全的添加到数字后面。这虽然听起来不错,但却不是单位正确的解析方式。可以把单位认为是代数符号,例如,在现实世界中,5 英寸乘以 5 英寸得到 25 平方英寸。Sass 也适用这样的逻辑。

将一个单位添加给数字的时候,实际上是让该数值乘以1个单位

$value: 42;

// Yep
$length: $value * 1px;

// Nope
$length: $value + px;

需要注意的是加上一个 0unit 也可以正确解析,但是这种方式在某种程度上会造成一些混乱,所以我更愿意推荐上面的方式。事实上,将一个数字转换为其他兼容单位时,加 0 操作并不会造成错误。

$value: 42 + 0px;
// -> 42px

$value: 1in + 0px;
// -> 1in

$value: 0px + 1in;
// -> 96px

这一切最终取决于你想要达到怎样的效果。只要记住,像添加一个字符串一样添加一个单位并不是一种好的处理方式。

要删除一个值的单位,你需要除以相同类型的 1 单位

$length: 42px;

// Yep
$value: $length / 1px;

// Nope
$value: str-slice($length + unquote(''), 1, 2);

给一个数值以字符串形式添加单位的结果是产生一个字符串,同时要防止对数据的额外操作。从一个带有单位的数值中分离数字部分也会产生字符串,但这些都不是你想要的。

计算

最高级运算应该始终被包裹在括号中。这么做不仅是为了提高可读性,也是为了防止一些 Sass 强制要求对括号内内容计算的极端情况。

// Yep
.foo {
  width: (100% / 3);
}

// Nope
.foo {
  width: 100% / 3;
}

MAGIC NUMBERS

“幻数”,是古老的学校编程给_未命名数值常数_的命名。基本上,它们只是能工作™但没有任何逻辑思维的随机数。

相信不用多说你也会理解,幻数是一场瘟疫,应不惜一切代价以避免。当你对数值的解析方式无法找到一个合理解释时,你可以对此提交一个内容宽泛的评论,包括你是怎样遇见这个问题以及你认为它应该怎样工作。承认自己不清楚一些机制的解析方式,远比让以后的开发者从零开始弄清它们更有帮助。

/**
 * 1\. Magic number. This value is the lowest I could find to align the top of
 * `.foo` with its parent. Ideally, we should fix it properly.
 */
.foo {
  top: 0.327em; /* 1 */
}

扩展阅读

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号