-
index()函数 index() 函数类似于索引一样，主要让你找到某个值在列表中所处的位置。在 Sass 中，第一个值就是1，第二个值就是 2，依此类推： >> index(1px solid red, 1px) 1 >> index(1px solid red, solid) 2 >> index(1px solid red, red) 3 在 index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，相反就会返回对应的值在列表中所处的位置。 >> index(1px solid red,dotted) //列表中没有找到 dotted false >> index(1px solid red,solid) //列表中找到 solid 值，并且返回他的位置值 2 2查看全部
-
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查看全部
-
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查看全部
-
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 参数，用来指定合并的列表中使用什么方式来分隔列表项：查看全部
-
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'查看全部
-
length()函数 length()函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值： >> length(10px) 1 >> length(10px 20px (border 1px solid) 2em) 4 >> length(border 1px solid) 3 length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错： >> length(10px,20px,(border 1px solid),2em) SyntaxError: wrong number of arguments (4 for 1) for `length' >> length(1,2px) SyntaxError: wrong number of arguments (2 for 1) for `length'查看全部
-
列表函数简介 列表函数主要包括一些对列表参数的函数使用，主要包括： length($list)：返回一个列表的长度值； nth($list,$n)：返回一个列表中指定的某个标签值 join($list1,$list2,[$separator])：将两个列给连接在一起，变成一个列表； append($list1,$val,[$separator])：将某个值放在列表的最后； zip($lists...)：将几个列表结合成一个多维的列表； index($list,$value)：返回一个值在列表中的位置值。 列表函数中的每个函数都有其独特的作用与功能查看全部
-
数字函数-random()函数 random()函数是用来获取一个随机数： >> random() 0.03886 >> random() 0.66527 >> random() 0.8125 >> random() 0.26839 >> random() 0.85063查看全部
-
数字函数-min()函数、max()函数 min()函数 min()函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数： >> min(1,2,1%,3,300%) 1% >> min(1px,2,3px) 1px >> min(1em,2em,6em) 1em 不过在 min() 函数中同时出现两种不同类型的单位，将会报错误信息： >> min(1px,1em) SyntaxError: Incompatible units: 'em' and 'px'. max()函数 max() 函数和 min() 函数一样，不同的是，max() 函数用来获取一系列数中的最大那个值： >> max(1,5) 5 >> max(1px,5px) 5px 同样的，如果在 max() 函数中有不同单位，将会报错： >> max(1,3px,5%,6) SyntaxError: Incompatible units: '%' and ‘px'.查看全部
-
数字函数-abs()函数 abs()函数会返回一个数的绝对值。 >> abs(10) 10 >> abs(-10) 10 >> abs(-10px) 10px >> abs(-2em) 2em >> abs(-.5%) 0.5% >> abs(-1px / 2px) 0.5 .footer { width:abs(-12.3px); } 编译后的CSS： .footer { width: 12.3px; }查看全部
-
数字函数-floor()函数 floor()函数刚好与ceil()函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算： >> floor(2.1) 2 >> floor(2.5) 2 >> floor(3.5%) 3% >> floor(10.2px) 10px >> floor(10.8em) 10em >> floor(2px / 10px) 0 >> floor(3px / 1em) 3px/em .footer { width:floor(12.3px); } 编译后的CSS： .footer{ width:12px; }查看全部
-
数字函数-ceil()函数 ceil()函数将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身1的整数。也就是做入，不会舍的计算： >> ceil(2.0) 2 >> ceil(2.1) 3 >> ceil(2.6) 3 >> ceil(2.3%) 3% >> ceil(2.3px) 3px >> ceil(2.5px) 3px >> ceil(2px / 3px) 1 >> ceil(2% / 3px) 1%/px >> ceil(1em / 5px) 1em/px .footer { width:ceil(12.3px); } 编译后的CSS: .footer{ width:13px; }查看全部
-
数字函数-round()函数 round()函数可以将一个数四舍五入为一个最接近的整数： >> round(12.3) 12 >> round(12.5) 13 >> round(1.49999) 1 >> round(2.0) 2 >> round(20%) 20% >> round(2.2%) 2% >> round(3.9em) 4em >> round(2.3px) 2px >> round(2px / 3px) 1 >> round(1px / 3px) 0 >> round(3px / 2em) 2px/em .footer{ width:round(12.3px); } 编译后的CSS： .footer{ width:12px; } 在round() 函数中可以携带单位的任何数值。查看全部
-
数字函数-percentage() 1、percentage()函数主要是将一个不带单位的数字转换成百分比形式： >> percentage(.2) 20% >> percentage(2px / 10px) 20% >> percentage(2em / 10em) 20% .footer{ width:percentage(.2) } 编译后的CSS： .footer{ width:20%; } 转换的值是一个带有单位的值，那么在编译的时候会报错误信息查看全部
-
数字函数简介 Sass中的数字函数提要针对数字方面提供一系列函数功能： percentage（$value）：将一个不带单位的数转换成百分比值； round($value)：将数值四舍五入，转换成一个接近的整数； ceil($value)：将大于自己的小数转换成下一位整数； floor($value)：将一个数去除他的小数部分； abs($value)：返回一个数的绝对值； min($numbers...)：找出几个数值之间的最小值； max($numbers...)：找出几个数值之间的最大值； random()：获取随机数；查看全部
举报
0/150
提交
取消