Less

基础语法

变量

Less 使用 @ 声明变量。

@main-color: #4d926f;

body {
  color: @main-color;
}

嵌套规则

支持像 Sass 一样的嵌套结构，结构更清晰。

nav {
  ul {
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
    }
  }
}

混合（Mixins）

定义一组样式作为可复用的函数。

.border-radius(@radius) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
}

.box {
  .border-radius(5px);
}

运算

Less 允许在样式中使用数学运算。

@width: 1000px;

.container {
  width: @width / 2; // 结果为 500px
}

继承（extend）

可使用 :extend 来继承已有的样式。

.button {
  border: 1px solid #ccc;
  padding: 10px;
}

.primary-btn {
  &:extend(.button);
  background: blue;
}

条件语句（guarded mixins）

允许根据条件来使用 mixin。

.set-color(@color) when (lightness(@color) >= 50%) {
  color: black;
}
.set-color(@color) when (lightness(@color) < 50%) {
  color: white;
}

div {
  .set-color(#ddd);
}

循环 & 遍历

Less 没有内置循环，但可以用递归 mixin 实现循环。

.loop(@i) when (@i > 0) {
  .col-@{i} {
    width: (100% / 12) * @i;
  }
  .loop(@i - 1);
}
.loop(12);

编译方式

• 本地使用 lessc 编译器（Node.js 安装后使用命令行）：

  lessc styles.less styles.css