Sass

1. 变量：sass允许使用变量，所有变量以$开头

$blue:#1875e7;
  div{
    color:&blue;
  }

如果需要镶嵌在字符串之中，就必须要写在#{}之中

$side:left;
  .rounded{
  border-#{$side}-radius:5px;
  }

2. 计算功能：SASS允许在代码中使用计算：

body{
  nargin:(14px/2);
  top:50px+100px;
  right:$var*10%;
 }

3. 嵌套：SASS允许选择器嵌套

divh1{
  color:red;
}

可以写成

div{
  hi{
    color:red;
  }
}

属性也可以嵌套：

p{
  border:{
  color:red;
  };
}

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a{
  &:hover{
  color:#ffb3ff;
  }
}

• 注释：SASS有两种注释
• 标准的css注释 /comment/ ，会保留到编译后的文件
• 单行注释//comment，只保留在sass源文件中，编译后被省略
• 在/后面加一个感叹号，表示这是“重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版本信息 /！ 重要注释 */

5. 继承：SASS允许一个选择器，继承另一个选择器。比如，现有class1:

.class1{
  border:1pxsolid#ddd;
}

class2要继承class1，就要使用@extend命令

.class1{
  @extend.class1;
   font-size:120%;
}

6. Mixin: Mixmin有点像c语言的宏（macro）是可以重用的代码块

@mixminleft{
  float:left;
  margin-left:10px;
}

使用@include命令，调用这个mixin

div{
  @includeleft;
}

mixin的强大之处，在于可以指定参数和缺省值

@mixinleft($value:10px){
  float:left;
  margin-right:$value;
}

使用的时候，根据需要加入参数：

div{
  @includeleft(20px);
}

下面是一个mixin实例，用来生成浏览器前缀

@mixinrounded($vert,$horz,$radius:10px){
border-#{$vert}-#{$horz}-radius:$radius;
-moz-border-radius-#{$vert}#{horz}:$radius;
-webkit-border-#{$vert}-#{$horz}--radius:$radius;
}

使用的时候可以像下面这样调用

#navbarli{
  @includerounded(top,left);
}
#footer{
  @includerounded(top,left,5px);
}
 

7. 颜色函数
   SASS提供了一些内置的颜色函数，一边生成系列颜色

lighten(#cc3,10%)//#d6d65c
darken(#cc3,10%)//a3a329
grayscale(#cc3)//808080
complement(#cc3)//#33c

8 插入文件

• @import命令，用来插入外部文件：@import ”path/filename.scss;
• 如果插入的是.css文件，则等同于css的import命令： @import “foo.css;

9. if可以用来判断

p{
@if1+1==2{border:1pxsolid;}
@if5<3{border:2pxdotted;}
}

配套的还有@else命令：

@iflightness($color)>30%{
  background-color:#000;
  } else {
  background-color:#fff;
}
 

10 SASS 支持for循环

@for$ifrom1to10{
  .border-#{$i}{
  border:#{$i}pxsolidblue;
  }
}
 

11. SASS 支持while循环

$i:6;
@while$i>0{
  .item-#{$i}{
  width:2em*$i;
  }
  &i:&i-2;
}
 

12. each命令，作用与for类似：

@each$memberina,b,c,d{
  .#{$member}{
  background-image:url("/image/#{$member}.jpg");
  }
}

13. SASS 允许用户编写自己的函数

@functiondouble($n){
  @return$n*2;
}
#sidebar{
  width:double(5px);
}