Sass：一种CSS预处理器语言

http://sass-lang.com/

Sass是一种CSS预处理器语言，通过编程方式生成CSS代码。因为可编程，所以操控灵活性自由度高，方便实现一些直接编写CSS代码较困难的代码。

同时，因为Sass是生成CSS的语言，所以写出来的Sass文件是不能直接用的，必须经过编译器编译成CSS文件才能使用。

Sass有什么好处？

Sass的主要特性如下：变量、嵌套、导入、混合、继承、运算、函数。这些特性为编写CSS加入编程控制的能力。

如何开始使用Sass

直接使用任何文本或代码编辑器都可以开始编辑Sass代码，要将Sass文件转换为CSS文件，则需使用Sass命令行编译器或桌面集成编译软件。

安装Sass编译器

Sass编译器使用Ruby环境，所以本地安装使用Sass编译器之前需要有Ruby环境，Ruby安装另见...

Ruby环境准备完毕后，使用gem安装Sass：

gem install sass

Sass语法

先分清sass与scss

Sass使用sass和scss这两种后缀名以区分不同的语法格式：

• sass与普通CSS的语法格式区别较大，其不使用花括号和分号。
• scss接近普通CSS的语法格式，使用与CSS相同的花括号和分号。
  
  具体要使用哪种格式，

在sass格式中，取消花括号，改为使用二个空格缩进嵌套；取消分号，以行分隔。

以下sass代码：

#div1
  width:50px
  height:30px

编译后为如下css代码：

#div1{
width:50px;
height:50px;
}

选择器嵌套

#sample
  .span
    font-size:12px
    font-weight:bold

属性嵌套

带有相同前缀的属性可进行嵌套

#sample
  font:
    size:12px
    weight:bold

变量

$red:#f00
h1
  color:$red

函数

.div1
  color:darken($red,10%)
  background:lighten($red,10%)

表达式

p
  color:$red - #101
  font-size:$fontsize+10px;

混合

重用代码

使用@mixin关键字定义混合代码，使用@include使用混合代码

@mixin后面是定义混合的名字

@mixin border-radius($amount:5px)
-moz-border-radius:$amount
-webkit-border-radius:$amount
border-radius:$amount
h1
@include border-radius(2px)
.speaker
@include border-radius

没有给出参数，会使用设置的默认值

选择器继承

使用@extend后面跟要继承的选择器

h1
border:4px solid #f00
.speaker
@extend h1
border-width:2px