常用基本语法

1.变量

变量是Sass中最基本的语法。凡是css属性的标准值（比如说1px或者bold）可存在的地方，都可以替换为变量。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
通过 $ 符号来定义，通过变量名称实现多处重复引用。

2.嵌套

Sass支持选择器及属性嵌套，可以避免代码的重复书写。

2.1选择器嵌套

大多数情况下上面那种简单的嵌套都没问题。但如果你想要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符。

2.2属性嵌套

示例1：

示例2：

3.代码重用之继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。
使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

如上示例，.class2不仅会继承.class1自身的所有样式，也会继承任何跟.class1有关的组合选择器样式，如下：

4.代码重用之Mixin混合器

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include+minxin名称来调用。

• 无参数mixin声明及调用：

• 

• 带参数mixin声明及调用
  可以不给参数值直接写参数，如果给了值的话，就是参数的默认值，在调用的时候传入其他值就会把默认值覆盖掉。

• 

• 带多组数值参数的mixin声明及调用
  如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。

• 

下面是一个实际应用中关于CSS3浏览器兼容的mixin使用示例：

5.颜色函数

Sass中集成了大量的颜色函数，让变换颜色更加简单直接。

其他颜色函数

• lighten(#cc3, 10%)      // #d6d65c
• grayscale(#cc3)      // #808080
• complement(#cc3)      // #33c

6.@import引入

CSS中原本就有不常用的@import语法，但是有两个弊端：

1. 引入语句一定要卸载代码最前面才会生效；
2. 影响性能。如果A文件要引入B文件，当浏览器读到A文件时会再去下载B，阻塞进程。

而Sass中的@import会在生成CSS文件时就把引入的所有文件先导入进来，也就是所有相关的样式会被编译到同一个CSS文件中，无需发起额外的请求。
当然，Sass的@import也支持导入远程的CSS文件。那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
一般来说基础的文件命名需要以'_' 开头，如 _partial.scss。这种文件在导入的时候可以不写下划线及后缀，可写成@import "partial"。但是倒入CSS文件的话，就需要“文件名+后缀”了。

原生的CSS导入

下列三种情况下会生成原生的CSS@import：

1. 被导入文件的名字以.css结尾；
2. 被导入文件的名字是一个URL地址（例如http://www.sass.hk/css/css.css ），由此可用谷歌字体API提供的相应服务；
3. 被导入文件的名字是CSS的url()值。

也就是说，你不能用Sass的@import直接导入一个原始的CSS文件，因为sass会认为你想用CSS原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。