通俗的來講，Less 是一個Css 預編譯器,意思指的是它可以擴展Css語言,添加功能如允許變量(variables),混合(mixins),函數(functions) 和許多其他的技術，從而可以讓CSS更具維護性，主題性，擴展性。
本文為Less入門與語法梳理教程。其中包括了一些入門級例子，適合於對Less有入門級了解的開發者查閱。
LESS 源文件的引入方式與標准CSS文件的引入方式一樣：
復制代碼代碼如下:
<link rel="stylesheet/less" type="text/CSS" href="styles.less">
在我們需要引入 LESS 源文件的 Html 中加入如下代碼：
復制代碼代碼如下:
<script src="less.JS" type="text/Javascript"></script>
導入文件：
復制代碼代碼如下:
@import “variables.less”;
@import “variables.CSS”;
/*也可以將標准的 CSS 文件直接改成 .less 格式*/
變量與作用域
復制代碼代碼如下:
/*用變量管理值*/
@width : 20px; //全局變量
#homeDiv {
#centerDiv{
width : @width; // 此處應該取最近定義的變量 width 的值 30px
}
@width : 30px; //局部變量，變量和混合是延遲加載的，不一定要在使用前聲明
}
#leftDiv {
width : @width; // 此處應該取最上面定義的變量 width 的值 20px
}</p>< p>/*用變量管理選擇器名稱、URLs、屬性*/
@mySelector: banner; // 定義一個變量用於選擇器名稱
@images: "../img"; // 變量可以是字符串
@property: color; // 定義一個變量用於屬性名稱
.@{mySelector} { //選擇器名稱使用變量的用法
background: url("@{images}/white-sand.png"); //URLs使用變量的用法
@{property}: #0ee;
…… //其它常規屬性等
}</p>< p>/*編譯生成的CSS文件*/
.banner {
background: url("../img/white-sand.png");
color: #0ee;
……
}
變量可以嵌套定義與使用
復制代碼代碼如下:
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;//嵌套使用
content: "I am fnord."; //編譯後結果
/*當一個變量定義兩次時，只會使用最後定義的變量，Less會從當前作用域中向上搜索。*/
數值，顏色和變量可運算
復制代碼代碼如下:
@init: #111111;
@transition: @init*2;
@var: 1px + 5 // Less能夠判斷顏色和單位之間的區別
.switchColor {
color: @transition;
}
/*編譯生成的CSS文件*/
.switchColor {
color: #222222;
}
混合（Mixins）與函數
復制代碼代碼如下:
.roundedCorners(@radius:5px) { //定義參數並且給予默認值
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}</p>< p> // 在另外的樣式選擇器中使用
#header {
.roundedCorners; //使用類並且參數為默認值
}</p>< p> #footer {
.roundedCorners(10px); //自定義參數值
}</p>< p>.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}</p>< p>#menu a {
color: #111;
.bordered;
/*在另一個規則集內部使用上面類的屬性，則直接訪問屬性所在類名（或Id名）即可*/
}
@arguments變量：當 Mixins 引用這個參數時，該參數表示所有的變量（多參數）。
復制代碼代碼如下:
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
命名空間：
復制代碼代碼如下:
#mynamespace {
.home {...}
.user {...}
}
//如果我們要復用 user 這個選擇器的時候，我們只需要在需要混入這個選擇器的地方這樣使用就可以了。#mynamespace > .user
嵌套規則：
復制代碼代碼如下:
<!-- Html片段-->
<div id="home">
<div id="top">top</div>
</div>
復制代碼代碼如下:
/*使用嵌套規則的LESS 文件*/
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
}
/*編譯生成的CSS文件*/
#home {
color: blue;
width: 600px;
height: 500px;
border: outset;
}
#home #top {
border: outset;
width: 90%;
}
a {
color: red;
text-decoration: none;
&:hover {
/*有 & 時解析的是同一個元素或此元素的偽類，沒有 & 解析是後代元素，&表示當前選擇器的父選擇器*/
color: black;
text-decoration: underline;
}
}
/*編譯生成的CSS文件*/
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
Extend：
extend是一個Less偽類，為擴展選擇器；擴展選擇器必須在所有偽類的最後
復制代碼代碼如下:
nav ul:extend(.inline)
background: blue;
}
.inline {
color: red;
}</p>< p>/*編譯生成的CSS文件*/
nav ul { // 聲明塊保持原樣
background: blue;
}</p>< p>.inline,nav ul {
color: red;
}</p>< p>pre:hover , .some-class {
&:extend(div pre);
}</p>< p>/*以上與給每個選擇器添加一個extend完全相同*/
pre:hover:extend(div pre),
.some-class:extend(div pre) {}
從本質上講extend會查找編譯後的CSS，而不是原始的less
復制代碼代碼如下:
.bucket {
tr & { // 目標選擇器中的嵌套，&代表最近父元素
color: blue;
}
}
.some-class:extend(tr .bucket) {} // 識別嵌套規則
/*編譯生成的CSS文件*/
tr .bucket , .some-class {
color: blue;
}
extend必須是精確匹配（包括通配符*、偽類順序、nth表達式，唯一例外的是屬性選擇器中的引號，less會知道它們是相同的，然後匹配它）
復制代碼代碼如下:
.a.class,
.class.a,
.class > .a {
color: blue;
}
.test:extend(.class) {} // 不會匹配上面的任何選擇器的值
*.class {
color: blue;
}
.noStar:extend(.class) {} //不會匹配*.class選擇器
link:hover:visited {
color: blue;
}
.selector:extend(link:visited:hover) {} //不會匹配，偽類順序不同
:nth-child(1n+3) {
color: blue;
}
.child:extend(n+3) {} //不會匹配，盡管邏輯上1n+3與n+3是相同的