less 笔记

变量

// 可单独定义全局变量和全局函数
@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

混合

// 定义规则
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

// 混入规则
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

函数

// 内置多种函数写法
@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

导入

@import "library"; // library.less
@import "typo.css";

运算

// 所有操作数被转换成相同的单位
@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%