1. 变量

// Variables @link-color: #428bca; // sea blue @link-color-hover: darken(@link-color, 10%); // Usage a, .link { color: @link-color; } a:hover { color: @link-color-hover; } .widget { color: #fff; background: @link-color; }

Selectors

v1.4.0

// Variables @my-selector: banner; // Usage .@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto; }

Compiles to:

.banner { font-weight: bold; line-height: 40px; margin: 0 auto; }

URLs

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

import：

// Variables @themes: "../../src/themes"; // Usage @import "@{themes}/tidal-wave.less";

Properties

v1.6.0

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

Compiles to:

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

In Less, you can define a variable's name using another variable.

@primary: green; @secondary: blue; .section { @color: primary; .element { color: @@color; } }

Which compiles to:

.section .element { color: green; }

2. 混合（Mixins） 

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

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

 

Not Outputting the Mixin

If you want to create a mixin but you do not want that mixin to be in your CSS output, put parentheses after the mixin definition.

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

outputs

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

 

3. 嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

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

用 Less 语言我们可以这样书写代码：

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

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

你还可以使用此方法将伪选择器（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）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

.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; } }

注释（Comments）

块注释和行注释都可以使用：

/* 一个块注释 * style comment! */ @var: red; // 这一行被注释掉了！ @var: white;

导入（Importing）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

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