列表函数简介

列表函数主要包括一些对列表参数的函数使用,主要包括以下几种:

  • length($list):返回一个列表的长度值;
  • nth($list, $n):返回一个列表中指定的某个标签值
  •  join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
  • append($list1, $val, [$separator]):将某个值放在列表的最后;
  • zip($lists…):将几个列表结合成一个多维的列表;
  • index($list, $value):返回一个值在列表中的位置值。

列表函数中的每个函数都有其独特的作用与功能

length()函数
length()函数主要用来返回一个列表中有几个值,简单点说就是返回列表清单中有多少个值

 >> length(10px)

 >> length(10px 20px (border 1px solid) 2em)

 >> length(border 1px solid)
 

length() 函数中的列表参数之间使用空格隔开,不能使用逗号,否则函数将会出错:

 >> length(10px,20px,(border 1px solid),2em)
SyntaxError: wrong number of arguments ( for ) for `length'
>> length(,2px)
SyntaxError: wrong number of arguments ( for ) for `length'

nth()函数
语法:

nth($list,$n)

nth()函数用来指定列表中某个位置的值。在Sass中,nth()函数和其他语言不同,1是指列表中的第一个标签值,2是指列表中的第二个标签值,依此类推。如:

 >> nth(10px 20px 30px,1)
10px
>> nth((Helvetica,Arial,sans-serif),2)
"Arial"
>> nth((1px solid red) border-top green,1)
(1px "solid" #ff0000)

注:在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数:

 >> nth((1px solid red) border-top green 1 ,0)
SyntaxError: List index 0 must be a non-zero integer for `nth'

join()函数
join()函数是将两个列表连接合并成一个列表。

 >> join(10px 20px, 30px 40px)
10px 20px 30px 40px
>> join((blue,red),(#abc,#def))
#0000ff, #ff0000, #aabbcc, #ddeeff
>> join((blue,red),(#abc #def))
#0000ff, #ff0000, #aabbcc, #ddeeff

不过join()只能将两个列表连城一个列表,如果直接连接两个以上的列表将会报错。
但很多时候不只碰到两个列表连接成一个列表,这个时候就需要将多个 join() 函数合并在一起使用:

 >> join((blue red), join((#abc #def),(#dee #eff)))
#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff

但当第一个列表中只有一个列表项,那么 join() 函数合并的列表项目中每个列表项目之间使用的分隔符号会根据第二个列表项中使用的,如果第二列表项中使用是,分隔,则使用逗号分隔;如果第二列项之间使用的空格符,则使用空格分隔:

 >> join(blue,(green, orange))
#0000ff, #008000, #ffa500
>> join(blue,(green orange))
#0000ff #008000 #ffa500

如果当两个列表中的列表项小于1时,将会以空格分隔:

 >> join(blue,red)
#0000ff #ff0000

什么时候会是用逗号分隔合并的列表项,什么时候是使用空格分隔合并的列表项,建议使用 join() 函数合并列表项的时候就明确指定 $separator 参数,用来指定合并的列表中使用什么方式来分隔列表项:

 >> join(blue,red,comma)
#0000ff, #ff0000
>> join(blue,red,space)
#0000ff #ff0000
>> join((blue green),(red,orange),comma)
#0000ff, #008000, #ff0000, #ffa500
>> join((blue green),(red,orange),space)
#0000ff #008000 #ff0000 #ffa500
>> join((blue, green),(red,orange),comma)
#0000ff, #008000, #ff0000, #ffa500
>> join((blue, green),(red,orange),space)
#0000ff #008000 #ff0000 #ffa500
>> join(blue,(red,orange),comma)
#0000ff, #ff0000, #ffa500
>> join(blue,(red,orange),space)
#0000ff #ff0000 #ffa500
>> join(blue,(red orange),comma)
#0000ff, #ff0000, #ffa500
>> join(blue,(red orange),space)
#0000ff #ff0000 #ffa500

append()函数
append()函数是用来将某个值插入到列表中,并且处于最末位。

 >> append(10px 20px ,30px)
10px 20px 30px
>> append((10px,20px),30px)
(10px, 20px, 30px)
>> append(green,red)
#008000 #ff0000
>> append(red,(green,blue))
#ff0000 #008000, #0000ff

如果没有明确的指定 $separator 参数值,其默认值是 auto。
如果列表只有一个列表项时,那么插入进来的值将和原来的值会以空格的方式分隔。
如果列表中列表项是以空格分隔列表项,那么插入进来的列表项也将以空格分隔;
如果列表中列表项是以逗号分隔列表项,那么插入进来的列表项也将以逗号分隔。
在 append() 函数中,可以显示的设置 $separator 参数,
如果取值为 comma 将会以逗号分隔列表项
如果取值为 space 将会以空格分隔列表项

 >> append((blue green),red,comma)
#0000ff, #008000, #ff0000
>> append((blue green),red,space)
#0000ff #008000 #ff0000
>> append((blue, green),red,comma)
#0000ff, #008000, #ff0000
>> append((blue, green),red,space)
#0000ff #008000 #ff0000
>> append(blue,red,comma)
#0000ff, #ff0000
>> append(blue,red,space)
#0000ff #ff0000

zip()函数
zip()函数将多个列表值转成一个多维的列表:

 >> zip(1px 2px 3px,solid dashed dotted,green blue red)
1px "solid" #008000, 2px "dashed" #0000ff, 3px "dotted" #ff0000

在使用zip()函数时,每个单一的列表个数值必须是相同的:
|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
|------------|--------------|--------------|--------------|
| List1 | 1px | 2px | 3px |
|------------|--------------|--------------|--------------|
| List2 | solid | dashed | dotted |
|------------|--------------|--------------|--------------|
| List3 | green | blue | red |
|------------|--------------|--------------|--------------|
zip()函数组合出来就成了:

1px solid green, 2px dashed blue, 3px dotted red

index()函数
index() 函数类似于索引一样,主要让你找到某个值在列表中所处的位置。在 Sass 中,第一个值就是1,第二个值就是 2,依此类推:

 >> index(1px solid red, 1px)
1
>> index(1px solid red, solid)
2
>> index(1px solid red, red)

index() 函数中,如果指定的值不在列表中(没有找到相应的值),那么返回的值将是 false,相反就会返回对应的值在列表中所处的位置。

 >> index(1px solid red,dotted) //列表中没有找到 dotted
false
>> index(1px solid red,solid) //列表中找到 solid 值,并且返回他的位置值 2

Introspection函数

Introspection函数包括了几个判断型函数:

  • type-of($value):返回一个值的类型
  • unit($number):返回一个值的单位;
  • unitless($number):判断一个值是否带有带位
  • comparable($number-1, $number-2):判断两个值是否可以做加、减和合并

Introspection 函数 -type-of()
type-of()函数主要用来判断一个值是属于什么类型:

返回值:

  • number 为数值型。
  • string 为字符串型。
  • bool 为布尔型。
  • color 为颜色型。
 >> type-of(100)
"number"
>> type-of(100px)
"number"
>> type-of("asdf")
"string"
>> type-of(asdf)
"string"
>> type-of(true)
"bool"
>> type-of(false)
"bool"
>> type-of(#fff)
"color"
>> type-of(blue)
"color"
>> type-of(1 / 2 = 1)
"string"

unit()函数
unit() 函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算:

 >> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"

但加、减碰到不同单位时,unit() 函数将会报错,除 px 与 cm、mm 运算之外:

 >> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"
>> unit(10px * 2em - 3cm / 1rem)
SyntaxError: Incompatible units: 'cm' and 'px*em'.
>> unit(10px * 2em - 1px / 1rem)
SyntaxError: Incompatible units: '' and 'em'.
>> unit(1px - 1em)
SyntaxError: Incompatible units: 'em' and 'px'.
>> unit(1px - 1rem)
SyntaxError: Incompatible units: 'rem' and 'px'.
>> unit(1px - 1%)
SyntaxError: Incompatible units: '%' and 'px'.
>> unit(1cm + 1em)
SyntaxError: Incompatible units: 'em' and 'cm'.

unit() 函数对于单位运算相对来说也没有规律,而且有些单位也无法整合成一个单位,对于我们在 CSS 中运用中并不适合,比如:

 >> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"

上面运算出来的单位,对于在 CSS 中使用将是没有任何意义的。

unitless()函数
unitless() 函数相对来说简单明了些,只是用来判断一个值是否带有单位,如果不带单位返回的值为 true,带单位返回的值为 false

 >> unitless(100)
true
>> unitless(100px)
false
>> unitless(100em)
false
>> unitless(100%)
false
>> unitless(1 /2 )
true
>> unitless(1 /2 + 2 )
true
>> unitless(1px /2 + 2 )
false

代码实现:用户在调用混合宏时,如果用户没有给参数值加上单位,程序会自动加入单位。

 @mixin adjust-location($x, $y) {
@if unitless($x) {
$x: 1px * $x;
}
@if unitless($y) {
$y: 1px * $y;
}
position: relative;
left: $x;
top: $y;
}
.botton{
@include adjust-location(20px, 30);
}

编译过来的CSS:

 .botton {
position: relative;
left: 20px;
top: 30px;
}

comparable()函数
comparable()函数主要是用来判断连个数是否可以进行“加,减”以及“合并”。如果可以返回的值为true,如果不可以返回的值是false:

 >> comparable(2px,1px)
true
>> comparable(2px,1%)
false
>> comparable(2px,1em)
false
>> comparable(2rem,1em)
false
>> comparable(2px,1cm)
true
>> comparable(2px,1mm)
true
>> comparable(2px,1rem)
false
>> comparable(2cm,1mm)
true

Miscellaneous函数
在这里吧Miscellaneous函数称为三元条件函数,主要因为他和JavaScript中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值:

if($condition,$if-true,$if-false)

上面表达式的意思是当$condition条件成立时,返回的值为 $if-true,否则返回的是 $if-false 值。

 >> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

Sass函数--列表函数的更多相关文章

  1. Sass函数--列表函数append

    append() 函数是用来将某个值插入到列表中,并且处于最末位. >> append(10px 20px ,30px) (10px 20px 30px) >> append( ...

  2. JMeter ----内置函数列表

    Jmeter有两种类型的函数: 用户定义的静态值(或变量) 内置函数 用户定义的静态值允许用户定义变量时被替换为静态的值测试树编译并提交运行.需要注意的是,变量目前无法嵌套,即${Var${N}}不起 ...

  3. 2-3 Sass的函数功能-列表函数

    列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值 join($list1, ...

  4. Sass函数--字符串函数

    Sass的函数简介在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: ● 字符串函数 ● 数字函数 ...

  5. Windows API 函数列表 附帮助手册

    所有Windows API函数列表,为了方便查询,也为了大家查找,所以整理一下贡献出来了. 帮助手册:700多个Windows API的函数手册 免费下载 API之网络函数 API之消息函数 API之 ...

  6. 虚函数列表: 取出方法 // 虚函数工作原理和(虚)继承类的内存占用大小计算 32位机器上 sizeof(void *) // 4byte

    #include <iostream> using namespace std; class A { public: A(){} virtual void geta(){ cout < ...

  7. LoadRunner常用函数列表

    LoadRunner常用函数列表 Web相关函数 函 数 功  能  描  述 web_custom_request 用户可以通过该函数自行创建一个HTTP请求的函数 web_image 模拟用户单击 ...

  8. 《zw版&#183;delphi与halcon系列原创教程》zw版_THOperatorSetX控件函数列表 v11中文增强版

    <zw版·delphi与halcon系列原创教程>zw版_THOperatorSetX控件函数列表v11中文增强版 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就 ...

  9. 《zw版&#183;delphi与halcon系列原创教程》zw版_THImagex控件函数列表

    <zw版·delphi与halcon系列原创教程>zw版_THImagex控件函数列表 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核心控件就是两 ...

随机推荐

  1. PP 创建BOM

    转自 http://blog.csdn.net/u012369651/article/details/19190939 一.最终结果预览. 二.创建过程. 使用到的事务码 CS01 创建BOM CS0 ...

  2. Bootstrap系列 -- 7. 列表排版方式

    一. 去点列表 1. 使用class=list-unstyled <ul > <li>无序列表项目</li> <li>无序列表项目</li> ...

  3. 简单的poi导出excel文件

    /**** 创建excel文件**/ 1 import java.io.FileOutputStream; import java.io.IOException; import java.util.C ...

  4. SpringMVC——hello SpringMVC

    概述: Spring的web框架围绕DispatcherServlet设计. DispatcherServlet的作用是将请求分发到不同的处理器. 与其它web MVC框架一样,Spring的web ...

  5. C++ map插入(insert)数据返回值

    例子: typedef boost::unordered_map<int, int> UserOnlineMap; UserOnlineMap userOnlineMap_; std::p ...

  6. git 命令归纳

    git 新手一枚,随用随更新 git clone git@example.com:project-name.git 克隆 git branch [-a -r] 查看分支[所有 远端] git pull ...

  7. 经典集合 与 IQueryable集合 的差别

    经典集合 与 IQueryable集合 的差别 经典集合与IQueryable 集合存在本质的区别,经典结合是在内存中开辟一片区域用来存储数据,而IQueryable集合是延迟加载的集合,只有在用到的 ...

  8. python 导入模块 import 理解

    --python 导入模块 import 理解 -----------------------------------2014/03/18 python 导入一个模块的过程要求有一个叫做“路径搜索”的 ...

  9. node 创建

    下载 node : 注意选项 ADD PATH 配置环境变量 node -v npm -v 检查创建一个服务器 : //创建一个服务器 127.0.0.1:8888 var http = requir ...

  10. Spring IOC容器的实现原理

    1 概述 1.1 依赖反转模式 在Java中,一个复杂的功能一般都需要由两个或者两个以上的类通过彼此合作来实现业务逻辑的,这使得每个对象都需要与其合作的对象的引用.如果这个获取依赖对象的过程需要自己去 ...