安装sass
第一种方式
sudo gem install sass
第二种方式
gem install 将下载的文件拖到终端这个后面
执行sass
sass --watch test.scss:test.css
更新sass
gem update sass
卸载（删除）sass
gem uninstall sass
sass编译
命令编译
sass --watch test.scss:test.css
GUI工具编译
自动化编译
grunt
gulp gulp-sass
https://www.imooc.com/code/6380
常见的编译错误
文件编码设置为“utf-8”
不同样式风格的输出方法
1、嵌套输出方式 nested
2、展开输出方式 expanded
--style expanded
只是大括号在另起一行
3、紧凑输出方式 compact
4、压缩输出方式 compressed
sass 声明变量
普通变量与默认变量
普通变量 $
默认变量 值后面加 !default
1、该值至少重复出现了两次
2、该值至少可能会被更新一次
3、该值所有的表现都与变量有关
全局变量就是定义在元素外面的变量
局部变量就是定义在元素内部的变量
嵌套-选择器嵌套
选择器 &
嵌套-属性嵌套 冒号编译后出现‘-’
boder: {
top:
bottom:
}
嵌套-伪类嵌套
.clearfix {
&:before,
&:after {
font-size:12px
}
&:after {
font-color:red
}
}
混合宏-声明混合宏
@mixin border-radius {
border-radius: 5px;
}
引用：
@include border-radius
混合宏的参数-传一个不带值的参数
@mixin border-radius(radius;
}
引用：
@include border-radius(5px)
混合宏的参数-传一个带值的参数
@mixin border-radius(radius;
}
引用：
@include border-radius
混合宏的参数--传多个参数
混合宏的参数--混合宏的不足
不能将相同的代码合并起来。代码压缩上不足
扩展/继承
@extend
占位符 %placeholder
混合宏 vs 继承 vs 占位符
声明方式
@mixin .class. %placeholder
调用方式
@include @extend. @extend
使用环境
如果相同代码块需要在不同的环境传递不同的值时，可以通过混合宏来定义重复使用的代码块。
不足：就是编译出来的css代码什么多次出现调用的混合宏对应的代码块，使用文件变得臃肿，代码冗余
如果相同代码块不需要传递不同的值，并且此代码块已在sass文件中定义，此进可以通过sass的继承将会调用已存在的基类。使用继承将会将调用相同的基类的代码合并在一起。
不足：如果基类，并不存在于html结构时，不管调用与不调用，在编译出来的css中都将产生基类对应的样式代码。
占位和继承基本类型，唯一不同的是，相同代码块并没有在基类中存中，而是额外声明。如果不调用已声明的占位符，将不会产生任何样式代码，如果在不同选择弃调用占位符，那么编译出来的css代码将会把相同的代码合并在一起
插值 #{}
注释
1、类似 css 的注释方式，使用 /* */
2、类似js的。//
数据类型
1、数字
2、字符串
3、颜色
4、布尔型
5、空值 null
6、值列表。用空格或者逗号分开
字符串
有引号字符串
无引号字符串
值列表
nth函数
join函数
append函数
@each规则
sass运算加法
碰到不同类型的单位时，编译会报错
网友评论