Sass 3.4 已发布

2014 年 8 月 19 日发布,作者 Natalie Weizenbaum

我们一直在努力加快 Sass 的发布速度,看起来我们已经成功了。在 Sass 3.3 发布仅仅五个月后,我们宣布发布 Sass 3.4.0,代号为 Selective Steve。更快的发布速度意味着每个版本的主要功能更少,因此只有两项重大新功能需要讨论(尽管在 更改日志 中可以阅读到大量的小改进)。顾名思义,这两个功能都与选择器相关。

在 SassScript 中使用 &在 SassScript 中使用 & 链接

“SassScript” 是我们对 Sass 用于变量、属性值等的小型语言的称呼。它主要只是 CSS 值,但它也支持自定义函数、算术运算等等。在 Sass 3.4 中,我们添加了对新事物的支持:父选择器 &

大多数 Sass 用户可能都认识 &,因为它之前在世界各地的选择器中出现过,用于显式引用父选择器。例如,在 .parent { .child & { ... } } 中,& 指的是 .parent,这将编译为 .child .parent { ... }

现在 & 在 SassScript 中的工作方式大致相同。它指的是同一个父选择器,但它不是简单地被丢弃,而是作为一个列表的列表公开,以便函数能够轻松地检查和操作它。例如,如果你写 .foo .bar, .baz { $selector: & }$selector 将是 ((".foo" ".bar"), (".baz",))

我们最初计划在 3.3 版中推出此功能,但当我们意识到 在包含逗号时很难以不会破坏的方式使用这些选择器 时,我们将它去掉了。因此,我们决定将其延迟到一个版本,以便我们有时间想出它的配套功能:选择器函数。

选择器函数选择器函数 链接

仅仅公开 & 的问题在于,唯一可以将其与其他选择器一起使用的方法是将它们作为字符串连接在一起。这在简单的情况下可以正常工作,但当你编写 #{$selector} .child 并且 $selector.foo, .bar 时,你想要的是 .foo .child, .bar .child,但你得到的是 .foo, .bar .child。这完全不好。

为了解决这个问题,我们添加了一系列函数,这些函数利用 Sass 强大的内置选择器逻辑来执行正确操作。例如,你现在可以编写 selector-nest(".foo, .bar", ".child") 并获得你想要的确切结果。这些函数都返回与 & 使用的嵌套列表表示形式相同的类型,但它们对接受的内容非常宽松:从嵌套列表到普通的字符串。

如果你想查看我们想到的每个选择器函数,请查看 更改日志。不过,我确实想重点介绍几个我特别喜欢的函数。你已经看到了 selector-nest(),而 selector-append() 是它的近亲。它们之间的区别在于空格:selector-nest() 在其选择器之间添加空格,而 selector-append() 则不添加。这意味着 selector-append(".foo, .bar", "-suffix") 返回 .foo-suffix, .bar-suffix

另一个我非常喜欢的函数是 selector-replace()。它在一个选择器中对另一个选择器进行搜索和替换,但它比基本的字符串替换要聪明得多。它使用 Sass 的 @extend 逻辑以语义方式替换选择器,就好像替换选择器匹配的每个元素也由被替换的选择器匹配一样。例如,selector-replace(".foo.bar.baz", ".foo.baz", ".qux") 返回 .bar.qux

最后一个我想提请你注意的非常强大的函数是 selector-unify()。它获取两个选择器并返回一个新的选择器,该选择器仅匹配两个输入选择器都匹配的元素。Sass 在内部大量使用此操作,现在用户也可以访问它。例如,selector-unify(".foo.bar", ".bar.baz") 将返回 .foo.bar.baz

接下来是什么?接下来是什么? 链接

我不会排除 Sass 3.5 存在的可能性,但 Chris 和我计划非常专注于 Sass 4.0。4.0 的主要功能将是 @import,或者更确切地说,是它的缺失。我们目前的导入系统开始出现严重的老化问题,我们打算彻底替换它,包括名称。从 4.0 开始,导入其他 Sass 文件的推荐方法将是 @use

在我们计划用于 @use 的功能中,有两项功能得到了广泛的请求。你将能够直接将 CSS 样式表导入到你的 Sass 样式表中,并且每个样式表只运行一次,无论它被导入多少次。

在那之前,运行 gem update sass 并享受 Selective Steve!