关于Sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

1. 特色功能 (Features)

• 完全兼容 CSS3
• 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令 (control directives)等高级功能
• 自定义输出格式

2. 语法格式 (Syntax)

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。

当然今天我给大家分享的格式就是SCSS，下面我们就来看看SCSS的常用语法吧～

& 引用父类

.box {
  &:hover{

  }    
 }

//编译后：

.box {

}
.box:hover {

}

$ 声明变量

$color: red;

.box {
  color: $color;
}

//编译后：
.box {
   color: red;
}

@import 引用文件

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

也可以通过一个 @import 引入多个文件。例如：

@import "rounded-corners", "text-shadow";

如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件，这时，你就可以在文件名前面加一个下划线，就能避免被编译。这将告诉 Sass 不要把它编译成 CSS 文件。
然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。
例如，你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了， 而且你还可以这样做:

@import "colors";

来引入 _colors.scss 文件。
注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存。

@function 自定义函数

@function double($n) {
  @return $n * 2;
}

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

//编译后：
#sidebar {
  width:10px;
}

@extend 继承属性

.error {
   border: 1px #f00;
   background-color: #fdd;
}
.seriousError {
   @extend .error;
   border-width: 3px;
}

//编译后：
.error, .seriousError {
   border: 1px #f00;
   background-color: #fdd;
}
.seriousError {
   border-width: 3px;
}

@mixin 定义代码块

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include 调用代码块

@include firefox-message(".header");

//编译后：
body.firefox .header:before {
  content: "Hi, Firefox users!";
}

@if 判断语句

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

//编译后：
p {
  border: 1px solid;
}

@for 循环语句

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//编译后：
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
 .item-3 {
   width: 6em; 
 }

@each 循环语句

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

@while 循环语句

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

//编译后：
.item-6 {
  width: 12em; 
}
.item-4 {
  width: 8em; 
}
.item-2 {
  width: 4em; 
}