sass基础

编译命令：
sass --watch D:/workspace/FE/01.SASS/sass/sa.scss:D:/workspace/FE/01.SASS/css/sa.css
scss文件变化之后自动编译；

编译时有很多参数配置：
sass --watch D:/workspace/FE/01.SASS/sass/sa.scss:D:/workspace/FE/01.SASS/css/sa.css --style expanded 编译出来大括号另起一行

sass --watch D:/workspace/FE/01.SASS/sass/sa.scss:D:/workspace/FE/01.SASS/css/sa.css --style compact 编译完成的css文件，单行格式
sass --watch D:/workspace/FE/01.SASS/sass/sa.scss:D:/workspace/FE/01.SASS/css/sa.css --style compressed 压缩css文件（去掉空格是注释）
grunt和gulp都可以实现自动化编译
sass编译不支持中文路径，不支持GBK编码，在创建sass文件时，需要将文件编码设置为utf-8
基本语法：
声明变量：$width:300px表
变量：普通变量：定义之后可以在全局范围内使用
默认变量：值后面添加 !default 要覆盖默认变量，只需要在此默认变量之前重新声明下变量即可
作用域
全局变量：在选择器、函数、混合宏。。。外面定义的变量为全局变量
//SCSS$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量).block { color: $color;//调用全局变量}em { $color: red;//定义局部变量
a { color: $color;//调用局部变量 }}span { color: $color;//调用全局变量}
嵌套：
选择器嵌套：

属性嵌套：

伪类嵌套：和属性嵌套相似，需要借助&符号一起配合使用

编译之后

混合宏
使用@mixin来声明混合宏
使用@include来调用宏
混合宏可以有参数：
@mixin border-radius($radius){

-webkit-border-radius:3px;

border-radius:3px;
}
.box{
@include border-radius(3px);
}
使用@extend实现继承

占位符 使用%声明 @extend调用

插值
数据类型
sass和javascript一样也有自己的数据类型。
数字：1、2、10px
字符串：有引号字符串和无引号字符创
颜色：
布尔型：
空值：
值列表：用空格或者逗号分开 例：margin:
10px 15px 0 0
sass能支持运算 + - * /