SASS和LESS都是专用于CSS的预编译语言,他们2者的功能,操作都是大同小异。LESS稍微简单一些,而SASS有一些比较成熟的框架(如compass),功能强大一些,其中的语法也比较符合一门编程语言的习惯,比如说函数,作用域,进程控制等等。所以,我也是选择的SASS来使用。
一、SASS中文官网
使用:
创建一个SCSS后缀的文件。
变量:
$name : 定义变量
直接调用$name引用变量
嵌套的CSS规则:
导入:@import
处理.SASS文件和.SCSS文件的相互转换
sass和scss是SASS的两种不同的语法,我们一般使用scss语法
注释:
// 不会编译进css文件
/**/ 会编译进css文件
混合器:
@mixin
@include
编译复杂混合属性用(如:font,background)
继承:
@extend
占位选择符:
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
编译为:
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em;
}
注:继承最好不要继承被包含的子选择器,编译出来后会把包含关系交叉写的非常复杂,可读性很差。
流程控制:
@if
@if - @else
@if - @else if - @else
@for $var from <start> through <end> ---- 包括开始与结束
@for $var from <start> to <end> ---- 包括开始,不包括结束
@each $var in <list>
@while condition {statements;}
函数:
@function fn(args) {
// statements
@return exp;
}
二、Less中文文档
略
SASS和LESS都需要通过编译后成为CSS文件才能使用,编译工具有很多种,下面推荐2种我常用的:
1、Koala
一款可视化的前端预处理器语言图形编译工具,优点是操作比较简便,可以批量操作,轻松设置各种参数。
2、gulp插件
gulp插件是非常多且功能强大的,其中不乏SASS和LESS的编译工具。优点是不需要装新的软件,而且找起来很方便。缺点是需要自己手写参数。