Skip to content

[注解] [405] 折角效果 #58

Open
@cssmagic

Description

@cssmagic

花絮与注解

第 111 页 ‧ 警告栏

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

关于 “泰勒级数”(Taylor Series)和 “泰勒展开式”(Taylor Expansion),可以参考 维基百科的相关条目

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

……另一方面,StylusLESS 是原生内置了三角函数的。

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

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

是的,魔法哥是 Stylus 铁粉。

交流与答疑

第 107 页 ‧ 第一段

色标的位置值将变成 {2 \over \sqrt{2}} = \sqrt{2} \approx 1.414213562,我们可以将其取整为 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 新技能,不需要在意这些细节。

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions