scss与compass

scss

1、 scss是css的扩展语言
2、注释：/* */（能被编译出来）和//（不能被编译出来）
3、变量：用$开头，用;结尾，值后加!default，指定值为默认值
4、嵌套：选择器嵌套和属性嵌套
5、@at-root跳出嵌套
6、&指父标签
7、宏：sass中使用@mixin声明宏，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include调用。
8、继承：@extend，后面跟要继承的选择器。
9、函数：@function 函数名(参数){ @return 表达式;}
10、运算：可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。运算符前后请留一个空格，不然会出错。
11、条件判断：@if 判断表达式 { } @else if 判断表达式 { } @else { }
12、三目运算：if($condition, $if_true, $if_false)
13、for循环：for循环有两种形式，分别为：@for $var from through 和@for $var from to 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
14、each循环：@each $var in { }

compass

1、compass是sass/scss的工具库
2、安装命令：gem install compass
3、创建compass项目：compass create myproject
4、scss编译成css：compass compile
5、scss编译成min.css：compass compile --output-style compressed
6、强制编译：compass compile --force
7、自动编译：compass watch
8、compass模块：css3、reset（重置）、layout（布局）、typography（版式）和utilities

gulp

gulp是前端css、js编译、合并、压缩等自动化工具，比grunt好用。