sass的语法格式和基本特性

五、 语法格式

1、sass语法格式
是sass的最初语法格式，是通过tab键控制缩进的一种语法规则，对锁紧要求非常严格，而且不带有任何的分号和大括号，把这种语法格式成为sass老版本，其文件名以 “.sass”为扩展名


2、scss语法格式
scss是sass的新语法格式，从外形上来判断他和css几乎是一样的，代码都包裹在一对大括号里，并且末尾结束出都有一个分号，其文件名以 “.sass”为扩展名


不管是 Sass 的语法格式还是 SCSS 的语法格式，他们的功能都是一样的，不同的是其书写格式和文件扩展名不同，来看一个简单的对比图：

六、sass编译

1、命令编译

单文件编译：sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

多文件编译：sass sass/:css/

自动监测：sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

2、GUI界面工具编译

Koala (http://koala-app.com/) **
Compass.app（http://compass.kkbox.com/）
Scout（http://mhs.github.io/scout-app/）
CodeKit（https://incident57.com/codekit/index.html）**
Prepros（https://prepros.io/）

3、自动化编译

Grunt：Grunt 配置 Sass 编译的示例代码

Gulp：Gulp 配置 Sass 编译的示例代码

七、 不同样式的输出方式

1、嵌套输出方式 nested

2、展开输出方式 expanded

3、紧凑输出方式 compact

4、压缩输出方式 compressed

八、sass声明变量

1、声明变量

美元符号“$”开头

2、普通变量与默认变量

普通变量：定义之后可以在全局范围内使用

默认变量：sass 的默认变量仅需要在值后面加上 !default 即可

3、局部变量和全局变量

//SCSS（代码演示）
$color: orange !default;//定义全局变量(在选择器、函数、混合宏…的外面定义的变量为全局变量)
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}

全局变量：定义在元素外面的变量（$color: orange !default;）

局部变量：定义在元素内部的变量（ $color: red;）