（以下所有操作基于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

less