本节我们会学习创建、编辑、定制一些LESS文件,以便为我们的设计生成期望的CSS。

如果你不太了解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。但LESS的嵌套规则更容易写,也更容易维护。

使用变量可以让我们只设定(或修改)一次,就能自动影响(更新)整个样式表中用到该值的属性。比如,可以像下面这样使用颜色变量:

@off-white:  #e5e5e5;
@brand-primary:  #890000;

在这些变量的值变化后,可以自动将它们更新到整个站点。这是因为我们在LESS文件中使用了这些变量:

a {
  color: @brand-primary;
}
.navbar {
  background-color: @brand-primary;
  > li > a {
  color: @off-white;
  }
}

混入可以让生成整套规则更方便也更容易管理。比如,可以利用它简化为元素应用border-box属性的任务。在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(border-box);
}
.another-element {
  .box-sizing(border-box);
}

编译之后,还会为每个元素生成三行CSS。

通过运算式可以基于变量实现数学计算。比如,可以将一种颜色作为基准,对其进行加亮和减暗处理:

a:hover { darken(@link-color, 15%); }

还可以计算内边距的值,以适应导航条的高度。比如,以下Bootstrap的navbar.less文件中的代码,就将导航项的内边距值设定为导航条高度减去行高之后剩余的高度值。然后,把这个值一分为二,平均应用为顶部和底部内边距:

.navbar > li > a {
  padding-top: ((@navbar-height - @line-height-computed) / 2);
  padding-bottom: ((@navbar-height - @line-height-computed) / 2);
}

LESS编译器支持导入并组合多个文件,最终生成一个统一的CSS文件。我们可以指定导入的次序,按照需要的层叠关系精确组织结果样式表。

Bootstrap的导入文件bootstrap.less一开始导入了基本的变量和混入。然后,又导入了(代替CSS重置样式表的)normalize.css 的LESS版,之后是针对打印媒体的基本样式(print.less)、基本的全局样式(scaffolding.less)和排版样式(type.less)。结果这个bootstrap.less文件的开头几行就是这样的:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";

而最终得到的将是一个统一的CSS文件,其中的样式经过从一般到特殊的层叠,正是我们想要的。

把多个文件导入并输出成一个文件,可以让我们更方便地组织样式,对它们进行分组,并在不同的文件中对它们进行维护。这也是Bootstrap会带有那么多LESS文件的原因,导航条有一个,按钮有一个,警告框有一个,传送带有一个……,而所有这些都会被导入到bootstrap.less文件。

正因为上述原因,LESS及其他CSS预编译器才会变得如此流行。它们已经成为专业Web开发不可或缺的一个重要部分。多数开发人员都认为这正是CSS的发展方向。

30:00