SASS
sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。
sass的导入(@import
)规则和CSS的有所不同,编译时会将@import
的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import ‘reset.css‘
,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import
方式存在。
所有的sass导入文件都可以忽略后缀名.scss
。一般来说基础的文件命名方法以_开头,如_mixin.scss
。这种文件在导入的时候可以不写下划线,可写成@import "mixin"
。
sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。
LESS
如果对同一个变量定义两次的话,在当前作用域中最后一次定义的将被使用。这与CSS的机制类似,最后一次定义的值会成为这个属性的值。
多参数混合
多个参数可以使用分号或者逗号分隔,推荐使用分号分隔,因为逗号有两重含义:它既可以表示混合的参数,也可以表示一个参数中一组值的分隔符。
使用逗号作为参数分隔符意味着可以将逗号分隔的一组值作为一个变量处理。换句话说,如果编译器在混合的定义或者是调用中找到至少一个分号,就会假设参数是使用分号分隔的,所有的逗号都属于参数中的一组值的分隔符。
2个参数,每个参数都含有通过逗号分隔的一组值的情况:.name(1, 2, 3; something, else)
。
3个参数,每个参数只含一个数字的情况:.name(1, 2, 3)
。
使用一个象征性的分号可以创建一个只含一个参数,但参数包含一组值的混合:.name(1, 2, 3;)
。
逗号分隔的一组值参数的默认值:.name(@param1: red, blue;)
。
使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时,LESS会应用到所有可以应用的混合上。比如你调用混合时只传了一个参数.mixin(green)
,那么所有只强制要求一个参数的混合都会被调用: