理解Sass的list

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

Sass中的List是一个让人可爱又可恨的东西。主要是他的语法太宽松,你几乎可以做任何你想做的事情。如果要想更好的使用好Sass语言中的List功能,我们就必须的深入了解他。Hugo写了几篇教程,其深入的培析了Sass的List功能,以及其使用方法。

除了这向篇文章,在互联网上很难找到有关于Sass的List更好教程了。而在Sass的社区中对List的功能讨论也是相当的激烈。这些天我也一直在阅读这几篇文章,想让自己能更好的理解Sass中的List功能。今天根据这几篇文章,对List功能的介绍做了一些翻译与整理。

创建一个Sass的list

首要的事情就是创建List。虽然在Sass中创建一个list可能会非常棘手,但事实上呢?Sass对于变量类型并不是非常严格,可以像理解Javascript语言一样,Sass也是一种弱类型语言。这样就意味着,处理一个列表你就可以像是在处理一个字符串,或者说是一个字符串列表功能。

Sass对于变量类型不是非常严格

在Sass中,有两种方法可以用来初始化一个的变量(这也可以被视为一个列表):

$a:();
$b:unquote(" ");//注意,冒号之间有一个空格
$c:null;
$d:(null);

现在我们创建了四个变量,接着通过Sass的type-of()函数来检测这些变量的类型:

type-of($a) => list
type-of($b) => string
type-of($c) => null
type-of($d) => null

接下来,使用length()函数来检测一下每个变量的长度:

length($a) => 0
length($b) => 1
length($c) => 1
length($d) => 1

$a的长度是0,这是我们能预想到的,因为他是一个空列表。$b的长度是1,因为他是一个字符串,然而$c$d都是null变量(空变量),令人想不通的是,他们的长度也是1

虽然$a$c($d)都可以用来初始化一个List(甚至是unquote(""),注,冒号之间没有任何空格),但前面简单的长度测试告诉我们,他们其实并不是完全一样的。当然如果你喜欢,你可以使用他们来初始化Sass的一个列表,但大家必须要记住,他们之间是不一样的。

()null的区

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/understanding-sass-list.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部