结束CSS,开始LESS吧!

LESS和SASS一样属于CSS预处理语言,可以极大的提高CSS的编写速度和效率。同时,当使用Sublime编辑开发文件的时候,为CSS语言开发的Emmet插件也同样可以兼容使用以进一步提高效率。LESS与SASS两者的编译环境虽然不一样,但目前最新版本的两种语言的编写方式却是大致相同的,不过由于LESS更适合新人上手,所以一开始我选择了LESS。LESS熟悉后再学SASS也是很容易的。

CSS预处理语言并不能直接在浏览器中使用(LESS可以配合less.js直接在客户端使用,但是非常不推荐这种方法),需要编译为CSS后才能使用。

嵌套

LESS最基本的写法就是像DOM结构一样直接嵌套,支持后代元素写法、子元素写法、兄弟元素写法等CSS2.1 CSS3选择器写法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body{
div{
font-size: 14px;
}
>p{
color: #333;
}
}
h1{
+p{
margin-top: 20px;
}
}
//生成的CSS:
body div {
font-size: 14px;
}
body > p {
color: #333;
}
h1 + p {
margin-top: 20px;
}

嵌套中可以在次一级用&代替父级选择器,这非常适合用来表示:hover :active等伪元素。同时,&不仅可以放在次一级选择器的前面,还可以放在后一级选择器的后面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
a{
text-decoration: none;
&:hover{
text-decoration: underline;
}
}
.bgc-op{
background-color: rgba(255, 255, 255, 0.5);
:root &{
filter:none;//修正ie9同时支持filter和rgba色值的问题
}
}
//生成的CSS
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.bgc-op {
background-color: rgba(255, 255, 255, 0.5);
}
:root .bgc-op {
filter: none;
}

变量与混合(Mixins)

变量可以用来预先定义一个样式表中多次出现的量,这样后期修改就会方便很多。变量用@符号加变量名表示,例如@highcolor。同时变量也可以出现在带参数的混合(Mixins)中。文本字符串、颜色值、宽度值等都可以用变量来表示。而混合则是将一组有相关关系的属性放在一起以方便调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//IE6引用png24透明图片
.bgi-32(@img){
background-image: url(@img);
_background:none;
_filter:~'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="@{img}",sizingMethod="crop")';
// 对于非合法CSS属性需要用引号将属性值括起来后前边加'~'符号
}
.s-sct{
.bgi-32('images/bg.png');// 这里直接调用.bgi-32(@img)这个混合就可以一次性解决不同浏览器下的透明背景图片问题
}
//生成的CSS
.s-sct {
background-image: url('images/bg.png');
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg.png",sizingMethod="crop");
}

Importing

上面引用的Mixins并不需要每次编写样式文件都复制到自己文件中,可以把工作中遇到的或者自己整理的所有有用的Mixins放到一个单独的文件中,只需在自己编写的LESS文件中通过Import方式引用一次即可。LESS import的写法和CSS一样,同时支持引入LESS文件和CSS文件(例如reset.css文件)。

1
2
3
@import "Zendless.less";
@import "Zendless";//对于less文件也可以不带后缀
@import "reset.css";

注释

LESS分为行注释和块注释,风格分别是:/* 块注释内容 */// 行注释内容。如果是使用Sublime编辑器的话快捷键Ctrl + /是行注释,快捷键Shift + Ctrl + /是块注释。在块注释的开头星号后加!英文感叹符号可以使注释内容保留在编译压缩后的代码中,即/*! 块注释内容 */

防止冗余代码

有人不愿意使用CSS预处理语言的理由是担心会像Dreamweaver一样产生很多垃圾代码降低执行效率,这种担心完全是多余的。如果有人写的LESS代码编译后有很多冗余代码的话,那他即使写CSS代码一定也是写得很垃圾。确实习惯LESS的嵌套式写法后会有一嵌到底的可能,但这是完全可以避免的。比如当嵌套超过三层时可以跳出嵌套另起一行,但为了保持文档整洁应该把另起的一行缩进到与上一行相对应的位置。当import的LESS文件中有不带参数的Mixins时,该Mixins会直接出现在编译后的CSS文件中。而对于带参数的Mixins,在引用它们之前是不会出现在编译后的文件里的。

1
2
3
4
5
.tove() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

比如上面这个用来截断单行文字显示省略号的Mixins,如果在每一个需要它的地方都调用一次它的话确实会产生多余的代码。这里可以用Less的extend伪类来解决。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.tove{
.tove();//先预定义一个tove的类名
}
.item1{
width: 34px;
&:extend(.tove);//再用extend Less伪类来将.item1类与.tove共用相同样式
}
.item2{
height: 288px;
&:extend(.tove);//同上
}
//生成的CSS
/* 这里将三个类名合并了 */
.tove,.item1,.item2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item1 {
width: 34px;
}
.item2 {
height: 288px;
}

编译

LESS可以在安装Nodejs后通过Node包管理工具安装,也可以在浏览器中引用less.js。不过更简单的方法是安装通过Koala自动监控文件变化自动编译,如果Koala默认的编译选项不能满足需求的话同样也可以自己写编译规则。

入门结束

掌握以上这些就可以很方便的入门了,更详细的介绍文档可以查看LESS英文官网或者LESS中文官网。由于Less和Sass等语言是为了克服CSS语言的编程性不足而设计的,所以它们在颜色色彩空间控制、数学运算、内置函数、Javascript表达式等方面都有非常明显的优势。这方面的内容会在下次文章中介绍。建议给Sublime安装LESS和SASS的插件,这样就可以减少按键次数来降低自己摔键盘的冲动。

分享到 评论