sass函数功能

一、字符串函数

1、unquote()函数：删除引号

//SCSS.test1 {    content:  unquote('Hello Sass!') ;}.test2 {    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.test1 {  content: Hello Sass!; }.test2 {  content: 'Hello Sass!; }.test3 {  content: I'm Web Designer; }.test4 {  content: 'Hello Sass!'; }.test5 {  content: "Hello Sass!"; }.test6 {  content: Hello Sass; }

2、quote()函数：添加引号，如果字符串，自身带有引号会统一换成双引号 ""

//SCSS.test1 {    content:  quote('Hello Sass!');}.test2 {    content: quote("Hello Sass!");}.test3 {    content: quote(ImWebDesigner);}.test4 {    content: quote(' ');}

//CSS.test1 {  content: "Hello Sass!";}.test2 {  content: "Hello Sass!";}.test3 {  content: "ImWebDesigner";}.test4 {  content: "";}

使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。如：

.test1 {    content:  quote(Hello Sass);}

编译时会报错：

error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')

解决方案就是去掉空格，或者加上引号：

.test1 {    content:  quote(HelloSass);}.test1 {    content:  quote("Hello Sass");}

同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错：

error style.scss (Line 13: Invalid CSS after "...quote(HelloSass": expected ")", was "!);")error style.scss (Line 16: Invalid CSS after "...t:  quote(Hello": expected ")", was “?);")

3、To-upper-case()：小写字母转换成大写字母

4、To-lower-case()：大写字母转换成小写字母

5、数字方面的函数：

•       percentage($value)：将一个不带单位的数转换成百分比值，如果带单位会报错；
•       round($value)：将数值四舍五入，转换成一个最接近的整数；
•       ceil($value)：将大于自己的小数转换成下一位整数；
•       floor($value)：将一个数去除他的小数部分；
•       abs($value)：返回一个数的绝对值；
•       min($numbers…)：找出几个数值之间的最小值，每个数值需统一单位；
•       max($numbers…)：找出几个数值之间的最大值，每个数值需统一单位；
•       random(): 获取随机数

6、列表函数：

 (1) length($list)：返回一个列表的长度值；

 (2)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 的整数。

 (3)join($list1, $list2, [$separator])：将两个列表连接在一起，变成一个列表；但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个 join() 函数合并在一起使用：

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

在 join() 函数中还有一个很特别的参数 $separator，这个参数主要是用来给列表函数连接列表值是，使用的分隔符号，默认值为 auto。

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

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

 (5)zip($lists…)：将几个列表结合成一个多维的列表；在使用zip()函数时，每个单一的列表个数值必须是相同的：

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

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

7、Introspection 函数

• type-of($value)：返回一个值的类型
• 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)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($number)：判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false
• comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并

8、Miscellaneous 函数

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

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

9、Maps的函数

sass Map：

$map: (    $key1: value1,    $key2: value2,    $key3: value3)

• map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
• map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
• map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
• map-keys($map)：返回 map 中所有的 key。
• map-values($map)：返回 map 中所有的 value。
• map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
• keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

10、颜色函数

(1) RGB函数

• rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
• rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
• red($color)：从一个颜色中获取其中红色值；
• green($color)：从一个颜色中获取其中绿色值；
• blue($color)：从一个颜色中获取其中蓝色值；
• mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

(2) HSL函数

• hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
• hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
• hue($color)：从一个颜色中获取色相（hue）值；
• saturation($color)：从一个颜色中获取饱和度（saturation）值；
• lightness($color)：从一个颜色中获取亮度（lightness）值；
• adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
• lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
• darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
• saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
• desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
• grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
• complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
• invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

(3) opacity 

•       alpha($color) /opacity($color)：获取颜色透明度值；
•       rgba($color, $alpha)：改变颜色的透明度值；
•       opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
•       transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明

11、sass的@规则

@import

Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

Sass 会在当前目录下寻找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :load_paths 选项或者在命令行中使用 --load-path 选项来指定额外的搜索目录。

@import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：

• 如果文件的扩展名是 .css。
• 如果文件名以 http:// 开头。
• 如果文件名是 url()。
• 如果 @import 包含了任何媒体查询（media queries）。

如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。

注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存。
嵌套 @import如下：

sass：

.example {  color: red;}#main {  @import "example";}

css:

#main .example {  color: red;}

@media

Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。来看一个简单示例：

sass:

.sidebar {  width: 300px;  @media screen and (orientation: landscape) {    width: 500px;  }}

css:

.sidebar {  width: 300px; }  @media screen and (orientation: landscape) {    .sidebar {      width: 500px; } }

@media 也可以嵌套 @media：
sass:

@media screen {  .sidebar {    @media (orientation: landscape) {      width: 500px;    }  }}

css:

@media screen and (orientation: landscape) {  .sidebar {    width: 500px; } }

在使用 @media 时，还可以使用插件#{}:
sass:

$media: screen;$feature: -webkit-min-device-pixel-ratio;$value: 1.5;@media #{$media} and ($feature: $value) {  .sidebar {    width: 500px;  }}

css:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {  .sidebar {    width: 500px; } }

@extend 
Sass 中的 @extend 是用来扩展选择器或占位符。比如：
sass:

.error {  border: 1px #f00;  background-color: #fdd;}.error.intrusion {  background-image: url("/image/hacked.png");}.seriousError {  @extend .error;  border-width: 3px;}

css:

.error, .seriousError {  border: 1px #f00;  background-color: #fdd; }.error.intrusion, .seriousError.intrusion {  background-image: url("/image/hacked.png"); }.seriousError {  border-width: 3px; }

@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。来看一个简单的示例：
sass:

.a {  color: red;  .b {    color: orange;    .c {      color: yellow;      @at-root .d {        color: green;      }    }  }  }

css:

.a {  color: red;}.a .b {  color: orange;}.a .b .c {  color: yellow;}.d {  color: green;}

@debug 
@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:

@debug 10em + 12em;

Line 1 DEBUG: 22em

@warn
@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass。如：

@mixin adjust-location($x, $y) {  @if unitless($x) {    @warn "Assuming #{$x} to be in pixels";    $x: 1px * $x;  }  @if unitless($y) {    @warn "Assuming #{$y} to be in pixels";    $y: 1px * $y;  }  position: relative; left: $x; top: $y;}

@error

@mixin error($x){  @if $x < 10 {    width: $x * 10px;  } @else if $x == 10 {    width: $x;  } @else {    @error "你需要将#{$x}值设置在10以内的数";  }}.test {  @include error(15);}