Sass插值、注释、数据类型、自定义函数

先从简单的开始来。

一、Sass的注释方法和css的完全相同，分两种： 

1、以/*开头，以*/结尾   （此种注释方法会在编译后的文件里单独一行显示注释，例如注释2）

2、使用//   （此种方法的注释不会在编译后的文件里显示， 例如注释3）

$color: green;
 /*注释1*/
.bg{
  color: $color; /*注释2*/ 
}//注释3

编译后

/*注释1*/
.bg {
  color: green;
  /*注释2*/
}

在/*后加一个感叹号！，表示这是“重要注释”，即使压缩模式编译也会保留这行，可用于申明版权之类的。

二、Sass数据类型

数字： 1、2、3、4、5、6px

字符串：引号可有可无， student、“student”

颜色： 可自定义同时Sass内置了一些颜色，自定义： green、#fff、rgba(0,0,0,.5) ， 内置： darken(#cc3,10%)  //#a3a329

布尔型： true、false

空值： null

值列表： 用空格或都好进行分隔， 例如：margin: 12px 10px、font-face: Arial,Microsoft Yahei

字符串中有一种情况除外，用#{}插值语句时，有引号的字符串会被编译成无引号的字符串；值列表可以用()表示空列表，但编译后不会出现()，例如font-size:(),编译会报错，若在列表中某个用()，则编译时将空值清除。

%mt5 {
  margin-top: 5px () 10px 6px;
}
.box  {
  @extend %mt5; 
}

编译后

.box {
  margin-top: 5px 10px 6px; //()的空值被清空了
}

三、插值

$pro: (max,min,line);
@mixin height($set,$value){
    @each $pr in $pro {
        #{$pr}-#{$set}: $value;
    }
}
.box{
    @include height(height,200px);
}

编译后

.box {
  max-height: 200px;
  min-height: 200px;
  line-height: 200px;
}

关于插值自己理解的并不是很好，还有很多没弄明白的地方，后续弄懂后再来追加总结。

四、自定义函数

@function tudou($val){
  @return $val*4;
}
.box{
  line-height: tudou(4px);
}

编译后

.box {
  line-height: 16px;
}