sass

开头先引用一下官网对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 作为拓展名。

变量$ (Variables: $)

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em

直接使用即调用变量：

#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

编译为

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

插值语句 #{} (Interpolation: #{})

通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue; 
}

#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p {
  font: 12px/30px; 
}

占位符%foo (Placeholder Selectors: %foo)

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用，更多介绍请查阅 @extend-Only Selectors。

%border{
  width: 150px;
  height: 80px;
  border: 1px solid $color;
}

.content{
  p{
    @extend %border;
  }
}

编译为：

.content p {
  width: 150px;
  height: 80px;
  border: 1px solid aqua;
}

使用%声明占位符，@extend 来应用占位符

占位符的功能非常强大，如果只声明了占位符，没有引用，编辑完成时，则不会生成代码

讲完占位符之后，介绍一个用法和它类似的

继承

.box{
  width: 300px;
  height: 100px;
  border: 1px solid #f00;
}

.content2{
  p{
    @extend .box;
  }
}

编译为：

.box, .content2 p {
  width: 300px;
  height: 100px;
  border: 1px solid #f00;
}

注意

可以看出占位符和继承中都运用了@extend

区别是占位符不会生成有效代码，而继承一个父类时，父类是有效的代码

混合指令 (Mixin Directives)

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

定义混合指令 @mixin (Defining a Mixin: @mixin)

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  width: 300px;
  height: 300px;
  border: 1px solid chartreuse;
  color: #ff0000;
}

引用混合样式 @include (Including a Mixin: @include)

.cotent4{
  @include large-text;
}

编译为：

.cotent4 {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  width: 300px;
  height: 300px;
  border: 1px solid chartreuse;
  color: #ff0000;
}

控制指令

1 流程指令 @if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

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

编译为

p {
  border: 1px solid; 
}

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译为

p {
  color: green; 
}

2 循环指令 @for 这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，

二者区别:

• through: 包括结尾 （例如 1 through 3， 得到 1， 2， 3）
• to: 不包括结尾 （例如 4 to 6，得到 4，5）

through

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

编译为

.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

to

@for $i from 4 to 6 {
  .item-#{$i} { width: 2em * $i; }
}

编译为：

.item-4 {
  width: 8em;
}
.item-5 {
  width: 10em;
}

3 循环指令 @each

$list: puma, sea-slug, egret, salamander;
@each $animal in  $list{
  .#{$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");
}

4 循环指令 @while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

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

编译为：

.item-6 {
  width: 600px;
}

.item-4 {
  width: 400px;
}

.item-2 {
  width: 200px;
}

5 函数指令 (Function Directives)

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

$width: 40px;
@function computeWidth($n: 5){
  @return $n * $width
}
.box2 {
  width: computeWidth();
}
// 或者
.box2 {
  width: computeWidth($n: 6);
}

编译为：

.box2 {
  width: 200px;
}