Less - CSS 预处理器

Less

Less 是一种动态样式语言，属于 CSS 预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

命令行安装

$ npm install less -g

// 命令行编译
$ lessc styles.less styles.css

用法

嵌套

普通嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

编译为：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: ' ';
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

@规则嵌套

@ 规则（如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

编译为：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

变量

1. 作为普通属性值只来使用：直接使用 @变量名

// 声明
@primary-color: #f90;
@width: 10px;
@height: @width + 10px;

// 使用
#div {
  background-color: @primary-color;
  width: @width;
  height: @height;
}

2. 作为选择器和属性名：@{selector的值} 的形式

// 声明
@w: container-wrap;
@bg: background;

#@{w} {
  @{bg}: #f6f6f6;
}

// 编译为：
#container-wrap {
  background: #f6f6f6f;
}

3. 变量的作用域和延迟加载

@var: 0px;
.class {
  @var: 1px;
  .brass {
    @var: 2px;
    width: @var;
    @var: 3px;
  }
  width: @var;
}

编译为：

.class {
  width: 1px;
}
.class .brass {
  width: 3px;
}

作用域：变量同级优先，再从父级继承；

延迟加载：同级出现两个变量，后声明优先；

混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式，类似于 JavaScript 中的函数， 目的是提高代码的重用性。

普通混合

.bgc {
  color: red;
}
.container {
  .bgc(); // 普通混合，将其它样式类属性引入
}

编译为：

.bgc {
  color: red;
}
.container {
  color: red;
}

不编译混合

.my-mixin {
  color: black;
}

// 该混合不会被输出
.my-other-mixin() {
  background: white;
}

.class {
  .my-mixin();
  .my-other-mixin();
}

编译为：

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

带参数混合

// .border-radius(@radius: 5px) 可设置默认值
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .border-radius(4px);
}

编译为：

#header {
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius 4px;
}

@arguments 的用法

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

编译为：

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  box-shadow: 2px 5px 1px #000;
}

清除浮动应用

// 定义
.clearfix() {
  &::after {
    content: '';
    display: block;
    clear: both;
  }
}

// 使用
.container {
  width: 100%;
  padding: 20px;
  .clearfix(); // 使用混合
}

转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

@min768: ~'(min-width: 768px)';
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译为：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

注意，从 Less 3.5 开始，可以简写为：

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。

条件判断

使用 when 关键字实现条件判断。

.arrowSet() {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: @pixel;
  border-style: solid;
}

.arrow(@direction, @color:#000, @pixel:5px) when (@direction = up) {
  .arrowSet();
  border-color: @color transparent transparent transparent;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = down) {
  .arrowSet();
  border-color: transparent transparent @color transparent;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = left) {
  .arrowSet();
  border-color: transparent transparent transparent @color;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = right) {
  .arrowSet();
  border-color: transparent @color transparent transparent;
}

.box {
  .arrow(up);
  .arrow(right, red, 100px);
}

运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

calc() 特例：

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。更多函数在Less 函数手册中有详细介绍。

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // 小数转换为百分比 => 50%
  color: saturate(@base, 5%); // 将颜色饱和度增加 5%
  background-color: spin(lighten(@base, 25%), 8); // 颜色亮度减小25%，色相增加8
}

映射

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

编译为：

.button {
  color: blue;
  border: 1px solid green;
}

注释

/* 一个块注释
 * style comment! */
@color: red;
// 行注释

导入

// 导入文件
@import url('variable.less');
@import url('variable'); // 可省略后缀
@import 'variable'; // 简写

---

参考文献：

• less - less 中文网