特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
Sass中的List是一个让人可爱又可恨的东西。主要是他的语法太宽松,你几乎可以做任何你想做的事情。如果要想更好的使用好Sass语言中的List功能,我们就必须的深入了解他。Hugo写了几篇教程,其深入的培析了Sass的List功能,以及其使用方法。
- Create Striped Backgrounds With Gradients (and a Sass Mixin)
- UNDERSTANDING SASS LISTS
- ADVANCED SASS LIST FUNCTIONS
除了这向篇文章,在互联网上很难找到有关于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
如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/understanding-sass-list.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!