通过LESS生成CSS非常方便,同时方便更改
嵌套规则
嵌套规则可以极大的提高组合样式的效率,比如css中常见的:
.navbar-nav {...}
.navbar-nav >li {...}
.navbar-nav >li >a {...}
.navbar-nav >li >a:hover,
.navbar-nav >li >a:focus {...}
而在LESS中表示方法简介很多:
.navbar-nav{...
> li {...
> a {...
$:hover,
$:focus {...}
}
}
}
编译后,这些规则就可以生成CSS了,十分方便。
变量
我们可以通过设定变量来更改整个样式表中用到该值的属性。比如下面的颜色变量:
@off-white: #e5e5e5;
@brand-primary: #890000;
只需要改变这个值就可以更新到整个站点。
混入
混入,指的是在CSS代码当中再书写CSS代码(也就是样式中的样式),对于一些会在样式表中重复使用的样式规则,使用样式的嵌套方式进行书写. 简单的理解,混入是什么呢?比如在网页当中有多处的标题,一部分标题共同拥有一个特点,即超出显示为省略号….
对于CSS,针对每个元素都要写三行相同的声明,而且还要记住每一种前缀的写法:
.box{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
在LESS中,可以写一个提供混入的规则,后面可以通过@boxmodel来指定期望的盒模型:
.box-sizing(@boxmodel){
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
然后在需要的地方加入混入:
.box{
.box-sizing(borber-box);
}
.another-element{
.box-sizing(borber-box);
}
编译之后,会为每个元素生成三行CSS。
运算式
对颜色为基准进行运算:
a:hover { darken(@link-color, 15%);}
计算内边距的值,在Boostrap的navbar.less文件中使用:
.navbar > li > a {
padding-top:((@navbar-height - @line-height-computed) / 2);
padding-bottom:((@navbar-height - @line-height-computed) / 2);
}
模块化及导入文件
LESS可以把多个文件通过import导入,如下:
// Core variables and mixins
@import "_variables.less";
@import "bootstrap/mixins.less";
//Other custom files
@import "_page-contents.less";
@import "_footer.less";
@import "_banner.less";
// Reset and dependencies
@import "bootstrap/normalize.less";
@import "bootstrap/print.less";
//@import "bootstrap/glyphicons.less";
@import "font-awesome/font-awesome.less";
正因为如此,LESS及其他CSS预编译器才会如此流行。他们已成为Web开发不可或缺的一部分,多数开发人员认为这正是CSS的发展方向。