Bootstrap之LESS基本

通过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的发展方向。