一.函数

1.字符串函数-unquote()函数

用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：        unquote($string)：删除字符串中的引号；       quote($string)：给字符串添加引号。

①unquote($string)删除字符串中的引号

unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。 //SCSS .test1 { content: unquote('Hello Sass!') ; } .test3 { content: unquote("I'm Web Designer"); } .test4 { content: unquote("'Hello Sass!'"); } .test5 { content: unquote('"Hello Sass!"'); } .test6 { content: unquote(Hello Sass); } 编译后的 css 代码： //CSS .test1 { content: Hello Sass!; } .test3 { content: I'm Web Designer; } .test4 { content: 'Hello Sass!'; } .test5 { content: "Hello Sass!"; } .test6 { content: Hello Sass; } unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。

② quote($string)给字符串添加引号

quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""。 //SCSS .test1 { content: quote('Hello Sass!'); } .test2 { content: quote("Hello Sass!"); } .test3 { content: quote(ImWebDesigner); } .test4 { content: quote(' '); } 编译出来的 css 代码： //CSS .test1 { content: "Hello Sass!"; } .test2 { content: "Hello Sass!"; } .test3 { content: "ImWebDesigner"; } .test4 { content: ""; } 注意： 使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。 .test1 {     content:  quote(Hello Sass);//这样使用，编译器马上会报错。 } 解决方案就是去掉空格，或者加上引号： .test1 {     content:  quote(HelloSass); } .test1 {     content:  quote("Hello Sass"); } 同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错.

③To-upper-case()将小写转换成大写

To-upper-case() 函数将字符串小写字母转换成大写字母。 //SCSS .test { text: to-upper-case(aaaaa); text: to-upper-case(aA-aAAA-aaa); } 编译出来的 css 代码： //CSS .test { text: AAAAA; text: AA-AAAA-AAA; }

④To-lower-case()将字符串转换成小写字母

To-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母： //SCSS .test { text: to-lower-case(AAAAA); text: to-lower-case(aA-aAAA-aaa); } 编译出来的 css 代码： //CSS .test { text: aaaaa; text: aa-aaaa-aaa; }

2.数字函数

针对数字提出一系列函数功能，注意：带单位的数值时，单位要相同

① percentage($value)换成百分比值

将一个不带单位的数转换成百分比值； .footer{     width : percentage(.2)；     padding:percentage(3px/10px);  } 编译后的 css 代码： .footer{     width : 20%；   padding：30%; }

②round($value)四舍五入

将数值四舍五入，转换成一个最接近的整数； >> width:round(12.3)-----//12 >> width:round(12.5)-----//13 >> width:round(1.49999)-----//1 >> width:round(2.0)-----//2 >> width:round(20%)-----//20% >> width: round(2.2%)-----//2% >> width:round(1px / 3px)-----//0 >> width:round(3px / 2em)-----//报错

③ceil($value)将小数大于1的数转换成下一位整数

ceil() 函数将小数大于本身 1的数转换成 的整数。 .footer { width:ceil(6.0); //----6 width:ceil(12.3px);//----13px width:ceil(2.6);//----3 width: ceil(2.3%);//---3% width:ceil(2px / 3px);//---1 width:ceil(2% / 3px);//-----报错 width:ceil(1em / 5px)//-----报错 }

④floor($value)去除小数部分

将一个数去除他的小数部分； .footer { width:floor(2.1); //----2 width:floor(12.3px);//----12px width:floor(2.8);//----2 width:floor(3.5%);//---3% width:floor(2px / 10px)//---0 width: floor(3px / 1em);//-----报错 }

⑤abs($value)返回一个数的绝对值

.footer { width:abs(12.3px); //----12.3px width:abs(-12.3px);//---- 12.3px width:abs(-1px / 2px);//----2 width:abs(-.5%);//--- 0.5% }

⑥min()最小值和max()最大值

min()找出几个数值之间的最小值；max()找出几个数值之间的最大值； .footer { width:max(10px,23px,10,2); height:min(10px,23px,10,2); } 编译成css .footer { width: 23px; height: 2; } 传入list求值时： $list: (50,45px,299px,93); .footer { width:max($list...); height:min($list...); } 编译成css .footer { width: 299px; height: 45px; }

⑧random():获取随机数

3.列表函数

①length($list)返回一个列表的长度值

列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错

>> length(10px)  -----1 >> length(10px 20px (border 1px solid) 2em)-----4 >> length(border 1px solid)--------3 >> length(10px,20px,(border 1px solid),2em)----报错

②nth($list, $n)指定某标签值

返回一个列表中指定的某个标签值(1 是指列表中的第一个标签值，2 是指列给中的第二个标签值，依此类推)

.footer { background:nth(red green,2); } 或是 $list:(red green); .footer { background:nth($list,2); } 编译成css .footer {     background: green; }

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

③join($list1, $list2, [$separator])连接成列表

只能将两个列表给连接成一个列表，俩个移上成列表

>> join(10px 20px, 30px 40px) (10px 20px 30px 40px) >> join((blue,red),(#abc,#def)) (#0000ff, #ff0000, #aabbcc, #ddeeff) //多个列表连接，需要将多个join()函数合并在一起使用： >> join((blue red), join((#abc #def),(#dee #eff))) (#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff) 除此之外，还有很特别的参数$separator，用来指定列表连接之间的分隔符的，默认为auto，还有comma（逗号）和space（空格）！

④append($list1, $val, [$separator])将某个值放在列表的最后

用来指定列表连接之间的分隔符的，默认为auto，还有comma（逗号）和space（空格）！

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

⑤zip($lists…)合成一个多维的列表

将多个列表结合成一个多维的列表

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

在使用zip()函数时，每个单一的列表个数值必须是相同的：

zip()函数组合出来就成了： 1px solid green, 2px dashed blue, 3px dotted red

⑥index($list, $value)返回一个值在列表中的位置值

第一个值就是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

⑦Introspection判断型函数

用来对值做一个判断的作用。

a.type-of($value)返回一个值的类型

number 为数值型。 string 为字符串型。 bool 为布尔型。 color 为颜色型。

type-of(100)或是type-of(100px)----"number" >> type-of("asdf")或是type-of(asdf)或是type-of(1 / 2 = 1)-----"string" >> type-of(true)-----"bool" >> type-of(#fff)或是type-of(blue)----"color"

b.unit($number)返回一个值的单位

用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算：

>> 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)-----报错

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

>> unit(10px * 3em)---"em*px" >> unit(10px / 3em)----"px/em" >> unit(10px * 2em / 3cm / 1rem)---"em/rem" 上面运算出来的单位，对于在 CSS 中使用将是没有任何意义的。

c.unitless($number)是否带有单位

只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false

>> unitless(100px)或是 unitless(100%)或是unitless(1px /2 + 2 )---false >> unitless(100)或是 unitless(1 /2 )或是unitless(1 /2 + 2 )---true 代码实现：用户在调用混合宏时，如果用户没有给参数值加上单位，程序会自动加入单位。

@mixin adjust-location($x, $y) { @if unitless($x) { $x: 1px * $x; } @if unitless($y) { $y: 1px * $y; } position: relative; left: $x; top: $y; background:red; } .botton{ @include adjust-location(20px, 30); } 编译过来的CSS： .botton { position: relative; left: 20px; top: 30px; background: red; }

d.comparable($number-1, $number-2)判断两个值是否可以做加、减和合并

主要是用来判断连俩个数是否可以进行“加，减”以及“合并”。如果可以返回的值为true，如果不可以返回的值是false: 到不同单位时，将会报错，除 px 与 cm、mm 运算之外：

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

⑧.Miscellaneous函数

在这里吧Miscellaneous函数称为三元条件函数，主要因为他和JavaScript中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值： if($condition,$if-true,$if-false) 上面表达式的意思是当$condition条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值。 >> if(true,1px,2px)----1px >> if(false,1px,2px)----2px

4. 颜色函数

①RGB()颜色函数

A.rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色； eg:rgb(200,40,88) //计算出一个十六进制颜色值  #c82858 B.rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色

俩种格式：

rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；

rgba($color,$alpha)

eg:rgba(#c82858,.65) //根据透明度计算出一个rgba颜色值 rgba(200, 40, 88, 0.65) C.red($color)：从一个颜色中获取其中红色值； eg:red(#c82858) //从#c82858颜色值中得到红色值 200 D.green($color)：从一个颜色中获取其中绿色值； eg: green(#c82858) //从#c82858颜色值中得到绿色值 40 E.blue($color)：从一个颜色中获取其中蓝色值； eg:blue(#c82858) //从#c82858颜色值中得到蓝色值 88 F.mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

$color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。 $weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。

//SCSS $color1: #a63; $color2: #fff; $bgColor1: #f36; $bgColor2: #e36; $borderColor1:#c36; $borderColor2:#b36; .mix { background: mix($bgColor1,$bgColor2,.75); color: mix($color1,$color2,.25); border-color: mix($borderColor1,$bgColor2,.05); } 编译的 css 代码： //CSS .mix { background: #ee3366; color: #fefefe; border-color: #ed33 }

②HSL()颜色函数

a.hsl($hue,$saturation,$lightness) 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；

eg: hsl(200,30%,60%) //通过h200,s30%，l60%创建一个颜色#7aa3b8

b.hsla($hue,$saturation,$lightness,$alpha) 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；

eg:hsla(200,30%,60%,.8)//通过h200,s30%，l60%,a80%创建一个颜色

rgba(122, 163, 184, 0.8)

c.hue($color) 从一个颜色中获取色相（hue）值；

eg:hue(#7ab)//得到#7ab颜色的色相值 195deg

d.saturation($color) 从一个颜色中获取饱和度（saturation）值；

eg:saturation(#7ab)//得到#7ab颜色的饱和度值 33.33333%

e.lightness($color) 从一个颜色中获取亮度（lightness）值；

eg:lightness(#7ab)//得到#7ab颜色的亮度值  60%

f.adjust-hue($color,$degrees) 通过改变一个颜色的色相值，创建一个新的颜色；

eg:adjust-hue(#f36,150deg) //改变#f36颜色的色相值为150deg

#33ff66  

g.lighten($color,$amount) 通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；

eg:lighten(#f36,50%) //把#f36颜色亮度提高50%

#ffffff

h.darken($color,$amount) 通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；

eg:darken(#f36,50%) //把#f36颜色亮度降低50% #33000d

i.saturate($color,$amount) 通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色

eg:saturate(#f36,50%) //把#f36颜色饱和度提高50% #ff3366

j.desaturate($color,$amount) 通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；

eg:desaturate(#f36,50%) //把#f36颜色饱和度降低50% #cc667f

k.grayscale($color) 将一个颜色变成灰色，相当于desaturate($color,100%);

eg：grayscale(#f36) //把#f36颜色变成灰色 #999999

l.complement($color) 返回一个补充色，相当于adjust-hue($color,180deg);

eg:complement(#f36) #33ffcc

m.invert($color) 反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

eg:invert(#f36) #00cc99

③Opacity()颜色函数

a.alpha($color) /opacity($color)获取颜色透明度值 eg: .footer {   backfround:alpha(red)或是opacity(red)---1 color:alpha(rgba(red,.8))或是 opacity(rgba(red,.8))----0.8 } b.rgba($color, $alpha)改变颜色的透明度值 eg: >> rgba(red,.5)----rgba(255, 0, 0, 0.5) >> rgba(rgb(34,45,44),.5)----rgba(34, 45, 44, 0.5) >> rgba(rgba(33,45,123,.2),.5)---rgba(33, 45, 123, 0.5) >> rgba(hsl(33,7%,21%),.5)-----rgba(57, 54, 50, 0.5) >> rgba(hsla(33,7%,21%,.9),.5)------rgba(57, 54, 50, 0.5) c.opacify($color, $amount) / fade-in($color, $amount)使颜色更不透明 eg: >> opacify(rgba(22,34,235,.6),.5)---#1622eb >> opacify(hsla(22,34%,23%,.6),.415)----#4f3527 >> opacify(red,.15)----#ff0000 >> fade-in(rgba(23,34,34,.5),.15)----rgba(23, 34, 34, 0.65) >> fade-in(rgba(23,34,34,.5),.615)------#172222 d.transparentize($color, $amount) / fade-out($color, $amount)使颜色更加透明 eg: >>  transparentize(red,.5)-----rgba(255, 0, 0, 0.5) >> fade-out(hsla(98,6%,23%,.5),.1)---rgba(58, 62, 55, 0.4)

案例七色卡：https://code.csdn.net/snippets_manage

5.map函数--数据地图

Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据。

$map: (     $key1: value1,     $key2: value2,     $key3: value3 ) 中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。

eg:

$theme-color: ( default: ( color: #2196f3, text-color: #444, link-color: #39f ), primary:( color: #000, text-color:#fff, link-color: #93f ), negative: ( color: #f36, text-color: #fefefe, link-color: #d4e ) ); @each $keys,$values in $theme-color{ .theme-color-#{$keys}{ @each $key,$value in $values{ #{$key}:#{$value} } } } 编译成css: .theme-color-default { color: #2196f3; text-color: #444; link-color: #39f; } .theme-color-primary { color: #000; text-color: #fff; link-color: #93f; } .theme-color-negative { color: #f36; text-color: #fefefe; link-color: #d4e; }

a.map-get($map,$key)给定的key返回相关的值

 函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null

$social-colors: ( dribble: #ea4c89, facebook: #3b5998, twitter: #55acee ); .btn-dribble{ color: map-get($social-colors,facebook); } 编译成css； .btn-dribble { color: #3b5998; }

b.map-merge($map1,$map2)将两个map并成新map

如果你要快速将新的值插入到 $map 中的话，这种方法是最佳方法.$newmap: map-merge($color,$typo);

$color: ( text: #f36, link: #f63, border: #ddd, backround: #fff ); $typo:( font-size: 12px, line-height: 1.6 ); $newmap: map-merge($color,$typo); .btn-dribble{ color: map-get($newmap,backround); } 编译： .btn-dribble { color: #fff; }

c.map-remove($map,$key)删除一个key，返回新map

但并不能直接从一个 map 中删除另一个 map，仅能通过删除 map 中的某个 key 得到新 map

$map:map-remove($theme-color,color);

$theme-color: ( color: #2196f3, text-color: #444, link-color: #39f ); $map:map-remove($theme-color,color); .theme-color{ @each $key,$value in $map{ #{$key}:#{$value} } } 编译成css: .theme-color { text-color: #444; link-color: #39f; }

d.map-keys($map)返回map中所有的key

将会返回 $map 中的所有 key。这些值赋予给一个变量，那他就是一个列表：map-keys($social-colors);

$social-colors: ( dribble: #000, facebook: #333, twitter: #55acee ); @function colors($color){ $names: map-keys($social-colors); @if not index($names,$color){ @warn "Waring: `#{$color} is not a valid color name.`"; } @return map-get($social-colors,$color); } @each $name in map-keys($social-colors){ .btn-#{$name}{ color: colors($name); } } 编译成css: .btn-dribble { color: #000; } .btn-facebook { color: #333; } .btn-twitter { color: #55acee; }

e.map-values($map)返回map中所有的value

$social-colors: (     dribble: #000,     facebook: #333,     twitter: #55acee ); 将会返回 $map 中的所有value。这些值赋予给一个变量，那他就是一个列表：map-values($social-colors)

f.map-has-key($map,$key)给定的key值判断是否有对应的value

如果有返回 true，否则返回 false。

$social-colors: ( dribble: #000, facebook: #3b5998, twitter: #55acee ); @function colors($color){ @if not map-has-key($social-colors,$color){ @warn "No color found for `#{$color}` in $social-colors map. Property omitted."; } @return map-get($social-colors,$color); } @each $social-network,$social-color in $social-colors { .btn-#{$social-network} { color: colors($social-network); } } 编译成css: .btn-dribble { color: #000; } .btn-facebook { color: #3b5998; } .btn-twitter { color: #55acee; } 注意：

i.自定义一个函数 colors()

ii.facebook 这个 key 已存在 $social-colors 这个 map 当中,能正常编译;如果你手误，将 facebook 输错了,则错。所以需要@if来判断

g.keywords($args)返回一个函数的参数

这个参数可以动态的设置 key 和 value。        keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现，其中 $args 变成 key(会自动去掉$符号)，而 $args 对应的值就是value。

@mixin mycolors($args...){ $list: keywords($args); @each $k,$v in $list{ .btn-#{$k}{ color:$v; } } } @include mycolors( $dribble: #ea4c89, $facebook: #3b5998, $twitter: #55acee ); 编译成css: .btn-dribble { color: #ea4c89; } .btn-facebook { color: #3b5998; } .btn-twitter { color: #55acee; }

6.自定义函数

SASS允许用户编写自己的函数: @function double($n) { @return $n * 2; } #sidebar { width: double(5px); }