开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

LESS-CSS预处理器

It's CSS, with just a little more.

Less(Leaner Style Sheets 精简样式表)是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Mixin、函数等特性，使css更易维护和扩展less既可以在客户端上运行，也可以借助Node.js在服务端运行。

Less 编译工具：

Koala(opens new window)
vscode 的 Easy LESS 插件

官方文档地址：less.bootcss.com/

在 Node.js 环境中使用 Less ：

npm install -g less`
`> lessc styles.less styles.css

在浏览器环境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />`
`<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

注释(Comments)

多行注释保留
单行注释不被保留在编译生成的 CSS 中

/* 
 * 这是想暴露出去的注释
*/

// 这是见不得人的注释(编译成less后看不到)   
div {
  color: red;
}

变量(Variables)

基本使用

@ 声明变量，作为普通属性值使用

@width: 50px;
@height: 100px;

div {
  width: @width;
  height: @height;
}

变量插值(Variable Interpolation)

变量用于选择器名、属性名、URL、@import语句

@my-selector: banner;

// 需要添加 {}
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

// Variables
@images: '../img';

// Usage
body {
  color: #444;
  background: url('@{images}/white-sand.png');
}

// Variables
@themes: '../../src/themes';

// Usage
@import '@{themes}/tidal-wave.less';

延迟加载(Lazy Evaluation)

当一个变量被声明多次，会取最后一次的值，并从当前作用域往外寻找变量。

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

.class {
  one: 1;
}
.class .brass {
  three: 3;
}