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代码：
```sass
#div1
  width:50px
  height:30px
```
编译后为如下css代码：
```css
#div1{
width:50px;
height:50px;
}
```


选择器嵌套
```sass
#sample
  .span
    font-size:12px
    font-weight:bold
```


属性嵌套
带有相同前缀的属性可进行嵌套
```sass
#sample
  font:
    size:12px
    weight:bold
```


变量
```sass
$red:#f00
h1
  color:$red
```


函数
```sass
.div1
  color:darken($red,10%)
  background:lighten($red,10%)
```


表达式
```saaa
p
  color:$red - #101
  font-size:$fontsize+10px;
```

混合
重用代码
使用@mixin关键字定义混合代码，使用@include使用混合代码
@mixin后面是定义混合的名字
```sass
@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后面跟要继承的选择器
```sass
h1
border:4px solid #f00
.speaker
@extend h1
border-width:2px
```

转载于:https://www.cnblogs.com/royalxavier/p/5731195.html