Lists

兼容性:Dart Sass ✓ |LibSass 3.5.0+|Ruby Sass 3.5.0+

旧的LibSass和Ruby Sass实现不支持方括号列表。

列表包含一系列值。在Sass中,列表中的元素可以用逗号(Helvetica,Arial,sans-serif)或空格(10px 15px 0 0)分隔,只要在列表中保持一致。与大多数其他语言不同,Sass中的列表不需要特殊的括号;任何用空格或逗号分隔的表达式都算作列表。但是,您可以使用方括号([line1 line2])编写列表,这在使用网格模板列时非常有用。

Sass列表可以包含一个或者零个元素。可以编写单元素列表可写成(<expression>,)[<expression>],零元素列表可以写成()[]。此外,所有列表函数都将处理不在列表中的单个值,就好像它们是包含该值的列表一样,这意味着很少需要显式地创建单元素列表。

没有方括号的空列表是无效的CSS,因此Sass不允许在属性值中使用。

使用方法

Sass提供了一些函数,可以使用列表编写功能强大的样式库,或者使应用程序的样式表更干净、更易于维护。

索引

其中许多函数接受或返回编号,称为索引,它引用列表中的元素。索引1表示列表的第一个元素。注意,这不同于许多编程语言,它们的索引是从0开始!Sass还可以方便的引用尾部的元素。索引-1表示列表中的最后一个元素,-2表示倒数第二个元素,依此类推。

元素访问

如果不能从列表中获取值,那么列表就没有多大用处。您可以使用nth($list, $n)来获取列表中指定索引的元素。第一个参数是列表本身,第二个参数是要取出的值的索引。

元素遍历

这实际上并不使用函数,但它仍然是使用列表最常见的方式之一。@each规则为列表中的每个元素计算一个样式块,并将该元素分配给一个变量。

添加元素

如果您需要检查一个元素是否在列表中,或者找出它所在的索引,请使用index($list, $value)函数。它接受一个列表和一个列表中的值,并返回该值的索引。

元素查找

如果该值根本不在列表中,index()返回null。因为null否定值,所以可以使用index()@ifif()来检查列表是否包含给定的值。

列表值不可变

Sass中的列表是不可变的,这意味着列表值的内容永远不会更改。Sass的列表函数都返回新的列表,而不是修改原始列表。不变性有助于避免在样式表的不同部分共享同一个列表时可能出现的许多意外的bug。

不过,您仍然可以通过将新列表分配给原变量来更新列表。在函数和mixin中,这通常用于将一组值收集到一个列表中。

参数列表

当您声明一个接受不定参数的mixin或函数时,您得到的值是一个称为参数列表的特殊列表。它的作用类似于包含传递给mixin或函数的所有参数的列表,但有一个额外的特性:如果用户传递了关键字参数,则可以通过将参数列表传递给keywords()函数来将它们作为键值对访问。

上次更新: 2019-11-5 4:49:11 PM