笔记：sass

1. 理解：

Sass 是一种 CSS 的预编译语言（用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件）。
它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能。
sass有两种语法格式，一种是SCSS,一种是最早的sass，SCSS是sass的一个升级版本，是 Sass 3 引入新的语法，其语法完全兼容CSS3。

2. 变量：

SASS允许使用变量，所有变量以$开头。
　	$side : left;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

3. 计算功能：

SASS允许在代码中使用算式：
　　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

4. 嵌套：

SASS允许选择器嵌套。属性也可以嵌套。在嵌套的代码块内，可以使用&引用父元素。
比如a:hover伪类，可以写成：
　　a {
　　　　&:hover { color: #ffb3ff; }
　　}

5. 继承：

SASS允许一个选择器，继承另一个选择器。class2要继承class1，就要使用@extend命令：
　　.class1 {
　　　　border: 1px solid #ddd;
　　}
　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

6. Mixin:

1. 使用@mixin命令，定义一个可以重用代码块。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
2. 使用@include命令，调用这个mixin。
　　div {
　　　　@include left;
　　}
　　
3. 在它后面跟混入的名称和任选的arguments（参数），以及混入的内容块。
    @mixin sexy-border($color, $width) {
      border: {
        color: $color;
            width: $width;
        style: dashed;
      }
    }
    p { @include sexy-border(blue, 1in); }
    编译为：
    p {
      border-color: blue;
      border-width: 1in;
      border-style: dashed; }

4. mixin可以指定参数和缺省值。使用的时候，根据需要加入参数：
　　@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}
　　div {
　　　　@include left(20px);
　　}
5. 样式内容块可以传递到混入（mixin）包含样式的位置。样式内容块将出现在混入内的任何 @content 指令的位置。这使得可以定义抽象 关联到选择器和指令的解析。
	  @mixin apply-to-ie6-only {
      * html {
        @content;
      }
    }
    @include apply-to-ie6-only {
      #logo {
        background-image: url(/logo.gif);
      }
    }
    编译为：
    * html #logo {
      background-image: url(/logo.gif);
    }

7. 插入文件：

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

8. 自定义函数：

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

　　#sidebar {
　　　　width: double(5px);
　　}

9. 循环语句：

1. for循环：
@for语句将设置$var为指定的范围内每个连续的数值，并且每一次输出的嵌套样式中使用$var的值。
对于from ... through的形式，范围包括<start>和<end>的值，但from ... to的形式从<start>开始运行，但不包括<end>的值。
　    @for $i from 1 through 3 {
          .item-#{$i} { width: 2em * $i; }
    }
    编译为：
      .item-1 {
     	 width: 2em; }
    .item-2 {
     	width: 4em; }
    .item-3 {
      	width: 6em; }
      	
2. while循环：
　　$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}

3. @each指令：
通常格式是@each $var in <list or map>。
$var可以是任何变量名，像$length 或者 $name，和<list or map>是一个返回列表（list）或 map 的 SassScript 表达式。
@each指令也可以使用多个变量，格式为@each $var1,$var2, ... in <list>。如果<list>是列表（list）中的列表，子列表中的每个元素被分配给各自的变量。
　　 @each $animal in puma, sea-slug, egret, salamander {
       .#{$animal}-icon {
         background-image: url('/images/#{$animal}.png');
         }
     }
   	编译为：
   	.puma-icon {
      background-image: url('/images/puma.png'); }
    .sea-slug-icon {
      background-image: url('/images/sea-slug.png'); }
    .egret-icon {
      background-image: url('/images/egret.png'); }
    .salamander-icon {
      background-image: url('/images/salamander.png'); }