（以下所有操作基于mac osx）
sass
1.sass的安装
- sass的安装依赖ruby环境，所以在安装sass之前需要先安装ruby环境，如果系统没有安装ruby环境的朋友先自行google安装ruby环境，安装好ruby环境以后执行以下命令安装sass
sudo gem install sass - 执行以下命令，如果正确输出版本号则表明sass已经正确安装
sass -v
2.sass更新
gem update sass
3.sass的卸载
gem uninstall sass
4.sass的编译
- 命令编译
sass test.scss test.css - 实时监听文件的改变并编译
sass --watch test.scss test.css - 使用GUI图形化界面软件编辑
在这里给他家推荐一款作者经常使用的工具Koala，它既可以编辑sass文件也可以编辑后面要讲到的less文件 - 自动化编译
如果你的项目使用了gulp或者grunt等自动化工具，可以进行相关配置，自动化编译，不懂配置小伙伴可以去阅读grunt和gulp的相关文章，所有插件的配置方式都一样
5.sass的输出
- 嵌套式输出
- 嵌套输出带 --style expanded(带css格式的输出，样式换行)
- 嵌套输出带 --style compact（紧凑的css格式输出）
- 嵌套输出带 --style compressed（压缩的css格式输出）
6.sass的变量
- 注意sass变量的作用域
- sass通过&符号直接访问父元素
- 属性嵌套
.box{
border:{
top:1px solid #ddd;
left:2px solid #ddd;
}
}
编译成css就是
.box{
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
7.混合宏
- 定义一个混合宏
@mixin name{
//样式
}
- 调用混合宏
a{
@include name;
}
- 带参数的混合宏
@mixin name(arg:defaultValue){
//样式
}
8.拓展和继承
- 继承
.parent{
//样式
}
.test{
@extend .parent
}
- 占位符
%test{
//样式
}
.h1{
@extend %test;
}
- 插值
9.sass运算(注意单位)
- 加
- 减
- 乘
- 除
- 颜色运算
- 字符运算
- 变量运算
10.@if{...}@else{...}
11.@for $i frome start through end / @for $i from start to end
12.@while 条件{}
13.@each $item in $list
14.sass函数
- 字符串函数
unquote()
quote()
to-upper-case()
to-lower-case()
- 数字函数
percentage()
round()
ceil()
floor()
abs()
min()
max()
random()
- 列表函数
length()
nth()
join()
append()
zip()
index()
- Introspection 函数
type-of()
unit()
unitless()
comparable()
- map函数
map()
map-get()
map-has-key()
map-keys()
map-values()
map-merge()
map-remove()
keywords()
- 颜色函数
rgb()
rgba()
red()
green()
blue()
mix()
lighten()
darken()
saturate()
desaturate()
adjust-hue()
grayscale()
alpha()
opacity()
opacfy()
fade-in()
transparentize()
fade-out()
15.@规则
- @import
- @media
- @extend
- @at-root
- @debug
- @warn
- @error
