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 <start> through <end>和@for $var from <start> to <end>。$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。
14、each循环:@each $var in <list or map> { }
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好用。