[注解] [405] 折角效果

[cssmagic]

花絮与注解

第 111 页 ‧ 警告栏

在编写本书时，SCSS 还没有原生支持三角函数。如果想正常使用三角函数，你就需要用到 Compass 框架 或其他库。借助泰勒展开式，你其实还可以自己写一套三角函数的实现……

关于 “泰勒级数”（Taylor Series）和 “泰勒展开式”（Taylor Expansion），可以参考 维基百科的相关条目。

关于在 Sass 中用泰勒展开式实现三角函数，可以参考这个代码片断：
SCSS/SASS module calculating sin/cos/tan using Taylor Expansion

……另一方面，Stylus 和 LESS 是原生内置了三角函数的。

原文其实没有提到 Stylus。Stylus 的内置函数相当丰富，可以参考 相关文档。

本书作者 Lea Verou 似乎对 Stylus 成见颇深。她曾 在 Twitter 上表示，她不喜欢 Stylus 是因为 “它的语法最不像 CSS”（但实际上 Stylus 完全支持 CSS 语法），而且 “社区很小”（唉，真是势利啊……）。

是的，魔法哥是 Stylus 铁粉。

交流与答疑

第 107 页 ‧ 第一段

色标的位置值将变成 ，我们可以将其取整为 1.5em……

图灵社区网友 @黄昏雨长相忆 反馈，用 Chrome 浏览器查看书中提供的 在线演示 时，折角大约有 0.2em 错位。

实际上，这种计算误差所引起的渲染误差在各个浏览器上都存在，不光光是 Chrome 的问题。在视网膜屏幕上，这个误差看起来可能更加明显。问题就出在 1.414213562 与 1.5 之间的误差上。

作者最终给出的代码是这样的：

background:
    ...
    linear-gradient(-135deg,
        transparent 1.5em, #58a 0);

如果把最后一行代码中的 1.5em 改成 1.414em，基本上就可以消除这个渲染误差了。

我不知道作者为什么要把这个值 “取整” 为 1.5em，不过我也并不纠结，毕竟我们看书是为了 get 新技能，不需要在意这些细节。