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能支持运算 + - * /