floor() 向下取整函数

ceil() 向上取整函数

百分数：percentage()

大小写转换

to-upper-case

to-lower-case

unquote()删除字符串引号 只能删除前后

加号和减号前后都添加空格，不然会识别成链接符

join中有个separator参数，默认为auto，会实际根据参数来决定用comma（逗号）还是space（空格）。建议使用join时明确指定separator。

另外join只能合并两个列表，如果是多个列表合并，需要用到join嵌套。

nth($list,$n)其中的$n必须是大于0的整数 

取值范围：[0,1)

quote字符串中间有单引号或者空格时，需要用双引号括起来。unquote则不需要用双引号括起来。另外quote中如果遇到特殊符号，比如!、?、>、-、_也需要用双引号括起。

through遍历时包含end这个数，to则不含end

语法结构：

@for 変数 from 数字 through 数字 {}

$***変数内 也可放 标签

@extend：样式继承

@for应用在网格系统生成各个格子 class 的代码：

//SCSS 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

编译出来的 CSS:

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.span1 {
  width: 60px;
}

.span2 {
  width: 140px;
}

.span3 {
  width: 220px;
}

.span4 {
  width: 300px;
}

.span5 {
  width: 380px;
}

.span6 {
  width: 460px;
}

.span7 {
  width: 540px;
}

.span8 {
  width: 620px;
}

.span9 {
  width: 700px;
}

.span10 {
  width: 780px;
}

.span11 {
  width: 860px;
}

.span12 {
  width: 940px;
}

将上面的示例稍做修改，将 @for through 方式换成 @for to:：

//SCSS
@for $i from 1 to 13 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

其最终编译出来的 CSS 代码和上例所编译出来的一模一样。

这两段 Sass 代码并无太多差别，只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12，其遍历出来的终点值也是 12，和 <end> 值一样。配合 to 的 <end> 值是 13，其遍历出来的终点值是 12，就是 <end> 对就的值减去 1 。

在SASS的@for循环中有两种方式：

@for $i from <start>  through  <end>

@for $i from <start>   to  <end>

$i表示变量

start表示起始值

end表示结束值

这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数

你编译出来的 CSS 代码中，不会有新代码添加，但在命令终端可以看到提示信息：

WARNING: No color found for faceboo in $social-colors map. Property ommitted.
         on line 25 of test.scss

是不是非常的友好。但总觉得这样写是傻傻的，总不可能每获取一个 key 都写一个 @if 语句吧。其实不用这么复杂，我们可以自定义一个函数，比如 colors():

@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);
}

有了这个函数之后，我们就可以这样使用

.btn-dribble {
    color: colors(dribble);
}
.btn-facebook {
    color: colors(facebook);
}
.btn-github {
    color: colors(github);
}
.btn-google {
    color: colors(google);
}
.btn-twitter {
    color: colors(twitter);
}
.btn-weibo {
    color: colors(weibo);
}