一、字符串函数
sass：
// unquote($string)：删除字符串最外层的一对引号。
.test1
content: unquote('Hello Sass!')
.test2
content: unquote("I'm Web Designer")
// quote($string)：给字符串添加引号。使用quote()函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。同时quote()碰到特殊符号，比如：!、?、>等，除中折号-和下划线_都需要使用双引号括起，否则编译器在进行编译的时候同样会报错
.test3
content: quote(unquote('Hello Sass!'))
// To-upper-case()：将字符串小写字母转换成大写字母。
.test4
content: To-upper-case(aaaaa)
content: To-upper-case(aA-aAAA-aaa)
// To-lower-case()：将字符串大写字母转换成小写字母。
.test5
content: To-lower-case(AAAAA)
content: To-lower-case(aA-aAAA-aaa)
css：
.test1 {
content: Hello Sass!;
}
.test2 {
content: I'm Web Designer;
}
.test3 {
content: "Hello Sass!";
}
.test4 {
content: To-upper-case(aaaaa);
content: To-upper-case(aA-aAAA-aaa);
}
.test5 {
content: To-lower-case(AAAAA);
content: To-lower-case(aA-aAAA-aaa);
}
/*# sourceMappingURL=style.css.map */
二、数字函数
sass：
// percentage($value)：将一个不带单位的数转换成百分比值；
.test1
width: percentage(.2)
// round($value)：将数值四舍五入，转换成一个最接近的整数；
.test2
width: round(20.2%)
.test3
margin-left: round(-1.1px)
// ceil($value)：向上取整
.test4
width: ceil(20.2%)
.test5
margin-left: ceil(-1.1px)
// floor($value)：向下取整
.test6
width: floor(20.2%)
.test7
margin-left: floor(-1.1px)
// abs($value)：返回一个数的绝对值；
.test8
width: abs(-1px / 2px)
// min($numbers…)：找出几个数值之间的最小值，数值的单位要统一，但可以有不带单位的数值。CSS4中已经支持这一函数，所以编译后与编译前并无差别，除非参数列表中有变量或函数返回值。
.test9
width: min(1%, 2, 3%)
// max($numbers…)：找出几个数值之间的最大值，数值的单位要统一，但可以有不带单位的数值。CSS4中已经支持这一函数，所以编译后与编译前并无差别，除非参数列表中有变量或函数返回值。
$val: 1%
.test10
width: max($val, 2, 3%)
// random(): 返回[0, 1)内的随机数
.test11
width: floor(random() * 10) + px
// random(n): 返回[1, n)内的随机数
.test12
width: random(10) + px
css：
.test1 {
width: 20%;
}
.test2 {
width: 20%;
}
.test3 {
margin-left: -1px;
}
.test4 {
width: 21%;
}
.test5 {
margin-left: -1px;
}
.test6 {
width: 20%;
}
.test7 {
margin-left: -2px;
}
.test8 {
width: 0.5;
}
.test9 {
width: min(1%, 2, 3%);
}
.test10 {
width: 3%;
}
.test11 {
width: 8px;
}
.test12 {
width: 7px;
}
/*# sourceMappingURL=style.css.map */
三、列表函数
sass：
// 返回列表$list的长度值；
// length($list)
.test1
height: length(10px) + px
width: length(10px (20em, 30em) 40px) + px
// 返回列表$list中第$n个元素
// nth($list, $n)
.test2
width: nth(10px 20px 30px, 2)
// 连接列表$list1和$list2成一个新列表，并且使用$operator作为分隔符，其中$separator可以是auto（自动）、comma（逗号）和space（空格）；
// join($list1, $list2, [$separator])
.test3
margin: join((10px 20px),(10px 20px), space)
// 将值$val放在列表$list的最后，并且使用$operator作为分隔符，其中$separator的用法和join()函数相同；
// append($list1, $val, [$separator])
.test4
margin: append((10px 20px), 10px)
// 将几个列表结合成一个多维的列表；
// zip($lists…)
.test5
text-shadow: zip(3px 2px 1px, 5px 2px 4px, black grey white)
// 返回值$value在列表$list中的位置。如果找不到就返回false
// index($list, $value)
.test6
width: index(1px solid red, 1px) + px
css：
.test1 {
height: 1px;
width: 3px;
}
.test2 {
width: 20px;
}
.test3 {
margin: 10px 20px 10px 20px;
}
.test4 {
margin: 10px 20px 10px;
}
.test5 {
text-shadow: 3px 5px black, 2px 2px grey, 1px 4px white;
}
.test6 {
width: 1px;
}
/*# sourceMappingURL=style.css.map */
四、颜色函数
sass：
// 根据红、绿、蓝三个值创建一个颜色；
// rgb($red, $green, $blue)
.test1
color: rgb(46, 254, 0)
// 根据红、绿、蓝和透明度值创建一个颜色；
// rgba($red, $green, $blue, $alpha)
// rgba($color, $alpha)
.test2
color: rgba(46, 254, 0, 0.7)
background-color: rgba(#ff0, 0.5)
// 从一个颜色中获取其中红色值；
// red($color)
.test3
color: red(#f09)
// 从一个颜色中获取其中绿色值；
// green($color)
.test4
color: green(#f09)
// 从一个颜色中获取其中蓝色值；
// blue($color)
.test5
color: blue(#f09)
// 把两种颜色混合在一起。$color-1和$color-2指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。$weight为合并的比例（选择权重），默认值为50%，其取值范围是0~1之间。它是每个RGB的百分比来衡量，当然透明度也会有一定的权重。默认的比例是50%，这意味着两个颜色各占一半，如果指定的比例是25%，这意味着第一个颜色所占比例为25%，第二个颜色所占比例为75%。
// mix($color-1,$color-2,[$weight])
.test6
color: mix(#f00, #00f, 25%)
css：
.test1 {
color: #2efe00;
}
.test2 {
color: rgba(46, 254, 0, 0.7);
background-color: rgba(255, 255, 0, 0.5);
}
.test3 {
color: 255;
}
.test4 {
color: 0;
}
.test5 {
color: 153;
}
.test6 {
color: #4000bf;
}
/*# sourceMappingURL=style.css.map */
sass：
$color: #ad141e
$amount: 10%
$degrees: 30deg
// 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
// hsl($hue,$saturation,$lightness)
// 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
// hsla($hue,$saturation,$lightness,$alpha)
// 从一个颜色中获取色相（hue）值；
// hue($color)
// 从一个颜色中获取饱和度（saturation）值；
// saturation($color)
// 从一个颜色中获取亮度（lightness）值；
// lightness($color)
// 通过改变一个颜色的色相值，创建一个新的颜色；$degrees的单位可以是deg（-360, 360）或%(-100, 100)
// adjust-hue($color,$degrees)
.test1
color: adjust-hue($color,$degrees)
// 通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
// lighten($color,$amount)
.test2
color: lighten($color,$amount)
// 通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
// darken($color,$amount)
.test3
color: darken($color,$amount)
// 通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
// saturate($color,$amount)
.test4
color: saturate($color,$amount)
// 通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
// desaturate($color,$amount)
.test5
color: desaturate($color,$amount)
// 将一个颜色变成灰色，相当于desaturate($color,100%);
// grayscale($color)
.test6
color: grayscale($color)
// 返回一个补充色，相当于adjust-hue($color,180deg);
// complement($color)
.test7
color: complement($color)
// 反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
// invert($color)
.test8
color: invert($color)
css：
.test1 {
color: #ad5714;
}
.test2 {
color: #db1926;
}
.test3 {
color: #7f0f16;
}
.test4 {
color: #b70a16;
}
.test5 {
color: #a31e26;
}
.test6 {
color: #616161;
}
.test7 {
color: #14ada3;
}
.test8 {
color: #52ebe1;
}
/*# sourceMappingURL=style.css.map */
sass：
// 获取颜色透明度值；
// alpha($color)
// opacity($color)
// 使颜色更不透明；
// opacify($color, $amount)
// fade-in($color, $amount)
// 这两个函数是用来对已有颜色的透明度做一个加法运算，会让颜色更加不透明。其接受两个参数，第一个参数是原始颜色，第二个参数是你需要增加的透明度值，其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时，会以 1 计算，表示颜色不具有任何透明度。
.test1
color: opacify(#a9d, 0.3)
// 使颜色更加透明。
// transparentize($color, $amount)
// fade-out($color, $amount)
// transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in() 函数相反，让颜色更加的透明。这两个函数会让透明值做减法运算，当计算出来的结果小于 0 时会以 0 计算，表示全透明。
.test2
color: transparentize(#a9d, 0.7)
css：
.test1 {
color: #aa99dd;
}
.test2 {
color: rgba(170, 153, 221, 0.3);
}
/*# sourceMappingURL=style.css.map */
五、Introspection 函数
type-of() 函数主要用来判断一个值是属于什么类型，其返回值有：
number 数值
string 字符串
bool 布尔
color 颜色
list 列表
map 图
>> 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"
>> type-of(1px 2px)
"list"
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'.
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
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
七、Maps函数
sass：
// map的定义
$color: (default: #fff, primary: #22ae39)
// 根据给定的键key，返回图map中相关的值。如果找不到，则不会输出css。
// map-get($map, $key)
.test1
color: map-get($color, primary)
// 将图map1和图map2合并成一个新的map。如果map1和map2中有同名的键，那么map2中的键会覆盖掉map1中的键
// map-merge($map1, $map2)
// 从图map中删除一个键key（同时删除键对应的值）。如果删除的key并不存在于$map中，那么map-remove()函数返回的新map和以前的map一样。
// map-remove($map,$key)
// 返回图map所有的键。
// map-keys($map)
@each $name in map-keys($color)
.test2-#{$name}
color: map-get($color, $name)
// 返回图map所有的值。
// map-values($map)
@each $name in map-values($color)
.test3-#{$name}
color: $name
// 根据给定的键key判断图map是否有对应的value值，如果有返回true，否则返回false。
// map-has-key($map, $key)
@if map-has-key($color, primary)
.test4
color: map-get($color, primary)
// 可以利用混合宏或函数传进来的参数创建map。
// keywords($args)
@mixin map($args...)
@debug keywords($args)
@include map($dribble: #ea4c89, $facebook: #3b5998, $github: #171515, $google: #db4437, $twitter: #55acee)
css：
.test1 {
color: #22ae39;
}
.test2-default {
color: #fff;
}
.test2-primary {a
color: #22ae39;
}
.test3-#fff {
color: #fff;
}
.test3-#22ae39 {
color: #22ae39;
}
.test4 {
color: #22ae39;
}
/*# sourceMappingURL=style.css.map */
八、自定义函数
@function 函数名(参数列表)
函数体
@return 函数的返回值
3937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
