-
Map Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据。 Sass 的 map ： $map: ( $key1: value1, $key2: value2, $key3: value3 ) 首先有一个类似于 Sass 的变量一样，用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号。 其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。在 Sass 中常用下面的方式定义变量： $default-color: #fff !default; $primary-color: #22ae39 !default; 我们使用 map 可以更好的进行管理： $color: ( default: #fff, primary: #22ae39 ); 你需要新增加颜色变量值，在 map 中可以非常随意的添加： $color: ( default: #fff, primary: #22ae39, negative: #d9534f ); 对于 Sass 的 map，还可以让 map 嵌套 map。其实就是 map 的某一个 key 当成 map，里面可以继续放一对或者多对 key:value： $map: ( key1: value1, key2: ( key-1: value-1, key-2: value-2, ), key3: value3 ); 有碰到过换皮肤的项目，可能每一套皮肤对应的颜色蛮多的，那么使用此功能来管理颜色的变量就非常的有条理性，便于维护与管理。你可以这样使用： 没有记录完查看全部
-
Miscellaneous函数 在这里吧Miscellaneous函数称为三元条件函数，主要因为他和JavaScript中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值： if($condition,$if-true,$if-false) 上面表达式的意思是当$condition条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值。 >> if(true,1px,2px) 1px >> if(false,1px,2px) 2px查看全部
-
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); }查看全部
-
Introspection函数 Introspection函数包括了几个判断型函数： type-of($value)：返回一个值的类型 unit($number)：返回一个值的单位； unitless($number)：判断一个值是否带有带位 comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并 这几个函数主要用来对值做一个判断的作用，我们来依次看每个函数的功能。查看全部
-
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查看全部
-
数字函数-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
提交
取消