作為 CSS 的一種擴展，Less 不僅完全兼容 CSS 語法，而且連新增的特性也是使用 CSS 語法。這樣的設計使得學習 Less 很輕松，而且你可以在任何時候回退到 CSS。less文件是以less作為文件后綴名，HTML引用時可以像css那樣引用，如下：

<link rel="stylesheet/less" type="text/css" href="styles.less">

注意：本文描述的一切都是基于1.4.0版本，除非有特殊標明。

變量：
　　　變量的作用就是把值定義在一個地方，然后在各處使用，這樣能讓代碼更易維護，如下：

復制代碼代碼如下:
// Variables
@link-color: #428bca; // sea blue
// 用法
a:link {
color: @link-color;
}
.widget {
color: #fff;
background: @link-color;
}

上面代碼將顏色#428bca賦給一個變量@link-color，然后在color屬性中使用變量，對應的css如下：

復制代碼代碼如下:
a:link {
color: #428bca;
}
.widget {
color: #fff;
background: #428bca;
}

變量不僅可以用在屬性值上，也可以用在選擇元素名，屬性名(1.6.0支持)，url和import方法。如下：

選擇元素名：

復制代碼代碼如下:
// Variables
@mySelector: banner;
// Usage
<a href=”mailto:.@{mySelector”>.@{mySelector</a>} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}

編譯后為

復制代碼代碼如下:
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}

url：

復制代碼代碼如下:
// Variables
@images: “../img”;
// 用法
body {
color: #444;
background: url(“@{images}/white-sand.png”);
}

編譯后

復制代碼代碼如下:
body {
color: #444;
background: url(“../img/white-sand.png”);
}
@import:
// Variables
@themes: “../../src/themes”;
// Usage
@import “@{themes}/tidal-wave.less”;

編譯后

復制代碼代碼如下:
@import “../../src/themes/tidal-wave.less”;

屬性名：

復制代碼代碼如下:
@property: color;
.widget {
@{property}: #0ee;
<a href=”mailto:background-@{property”>background-@{property</a>}: #999;
}

編譯后

復制代碼代碼如下:
.widget {
color: #0ee;
background-color: #999;
}

變量的變量名也可以是變量，如下：

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;

編譯后

content: "I am fnord.";

延遲加載：
　　變量支持延遲加載，所以你可以在變量定義之前使用。如下：

復制代碼