博客原文地址：Claiyre的個人博客 https://claiyre.github.io/
博客園地址：http://www.cnblogs.com/nuannuan7362/
如需轉載，請在文章開頭注明原文地址

前言

less作為css語言的擴展，賦予了css動態語言的特性，如：變量，繼承，運算，函數等。如果你原本就是程序員，你一定會非常喜愛less，它可以幫你節省很多重復工作，可以讓你像編寫一門動態語言一樣地編寫css。
本文總結了less的相關語法和使用方式，可供查閱和入門使用。

正文

語法

變量

less允許使用變量，可以將一個多次用到的值設為一個變量。less中沒有類型限制，以符號@標識變量，在聲明或使用變量時再變量名前添加符號@即可

@bg-color: #fff;
@base-font-size: 16px;

//使用

.body{
	background-color: @bg-color;
	font-size: @base-font-size;
}

多數情況下，我們是將這個變量當做一個常量來使用；less中變量也只能被定義一次這一點使之更像常量。

混合

將需要用到多次的全局css樣式集成為一個css類，在其他類中可以直接引用這個集成類，這個過程稱為混合。
實例：

.base-border{
	border: 2px solid #0c6dc7;
	border-radius: 6px;
}

.img-top{
	 150px;
	height: 150px;
	.base-border
}
.img-bottom{
	 200px;
	height: 150px;
	.base-border
}

上面的會被解析為

.img-top{
	 150px;
	height: 150px;
	border: 2px solid #0c6dc7;
	border-radius: 6px;
}
.img-bottom{
	 200px;
	height: 150px;
	border: 2px solid #0c6dc7;
	border-radius: 6px;
}

個人認為混合與傳統OO語言的繼承頗為相似，子類繼承父類的特征的同時，也可以添加自己專有的特征。

帶參數的混合

在使用混合時，less允許給父類傳入參數，參數使我們可以更加靈活地運用混合
比如，可以稍微改動上面的.base-border類

.base-border(@radius){
	border: 2px solid #0c6dc7;
	border-radius: @radius;
}

//使用
.img-top{
	 150px;
	height: 150px;
	.base-border(10px);
}
.img-bottom{
	 200px;
	height: 150px;
	.base-border(15px);
}

還可以設置參數的默認值，多個參數用逗號隔開：

.base-border(@color: #0c6dc7,@radius: 6px){
	border: 2px solid @color;
	border-radius: @radius;
}

//使用
.img-top{
	 150px;
	height: 150px;
	.base-border;  //默認是顏色#0c6dc7，半徑6px
}
.img-bottom{
	 200px;
	height: 150px;
	.base-border(#ff0000,15px);
}

在一個帶參數的類中，我們可以通過@arguments來獲取傳進來的所有參數，可以整體作為某個屬性的值。

嵌套規則

嵌套規則基于html的文檔結構，可以減少我們對一些css選擇器的使用，使代碼更易懂，更簡潔。
例如，我們需要設置這樣的樣式：

.parent{
	background-color: #ff0000;
}

.parent .child{
	height: 200px;
	 200px;
}
.parent.ancestor{
	border: 2px solid #000;
}

用less可以這樣嵌套，文檔結構更加明顯：

.parent{
	background-color: #ff0000;
	.child{
		height: 200px;
		 200px;
	}
	&.ancestor{
		border: 2px solid #000;
	}
}

符號&,表示“and”，也可以理解為父級選擇器。

顏色函數

less提供了多個顏色運算的函數，非常方便

函數	功能
lighten(@color,10%)	返回一個比@color亮10%的顏色
darken(@color,10%)	返回一個比@color暗10%的顏色
saturate(@color,10%)	返回一個比@color飽和度高10%的顏色
desaturate(@color,10%)	返回一個比@color飽和度低10%的顏色
fadein(@color,10%)	返回一個比@color透明度低10%的顏色，透明度低，顏色更深
fadeout(@color,10%)	返回一個比@color透明度高10%的顏色，透明度高，顏色更淺
fade(@color,90%)	返回一個透明度為0.9的顏色，等于fadeout(@color,10%)
spin(@color,10)	返回顏色的hue值比@color大10度
spin(@color,-10)	返回顏色的hue值比@color小10度
mix(@color-1,@color-2)	返回@color-1和@color-2混合后的顏色

這些顏色運算函數會先將顏色轉化為HSL色彩空間，然后在通道級別運算

math函數

less還提供了幾個math函數，用來處理數字

函數	功能
ceil(@number)	向上取整
floor(@number)	向下取整
round(@number)	四舍五入

匹配模式

less匹配即判斷是否滿足條件，相當于switch或if-else if的用法，彌補了less不支持switchh和if的缺憾。
實例用法：

.special-border(top,@color){      // 匹配top 1
	border-top: 2px solid @color;
	border-top-left-radius: 10px;
	border-top-right-radius: 20px;
}
.special-border(bottom,@color){      // 匹配bottom 2
	border-bottom: 2px solid @color;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 10px;
}
.special-border(@_,@color){ //匹配所有  3
	border-right: 2px solid @color;
	border-left: 2px solid @color;
}

.content{
	.special-border(bottom, #73d79c);
	height: 200px;
	 200px;
}

上述代碼中.content類匹配了2和3

導引

導引是對參數是否滿足一定條件的匹配，不是對參數值得匹配。搭配when語句使用。

.class(@a) when(@a > 10){ ... }

.class(@a) when(iscolor(@a)){ ... }

.class(@this-media) when(@this-media = mobile){ ... }

.class(@a) when(@a){ ... } //僅當@a = true 時才可匹配

注意，在導引后的when語句中，若是只有單獨的值，則除布爾值true以外的任何值都被視作假

導入

在文件開頭通過關鍵字@import導入其他樣式文件

@import "style.less"
@import "style"

@import "style.css"

以.less為后綴的文件的后綴名帶不帶均可
另： less不會處理.css的文件

變量作用域

less中的變量作用域和其他語言類似，首先會從本地查找變量或者混合模塊，如果沒找到的話會去父級作用域中查找，直到找到為止.

注釋

兩種注釋方法，應注意其區別：

/*這是注釋，編譯為css后不會被濾掉*/

//這也是注釋，編譯為css后會被濾掉

使用

less可以在客戶端使用，也可以在服務端使用

客戶端使用

在html頭部引入你的.less樣式文件
在html頭部引入less.js文件

上述引入文件的順序不可顛倒

服務器端使用

先安裝，最簡便的方法是通過npm包管理器安裝

$ npm install less

// 或安裝最新穩定版本的 LESS
 $ npm install less@latest  

在文件頭部通過require引入less即可使用

在命令行中手動將less編譯為css文件

$ lessc styles.less > styles.css

結語

less并未減弱css的任何強大之處，在任何時候都可以回退至原始css，同時讓習慣動態語言的程序員可以更方便地編寫less。與其功能類似的有sass，兩者各有優點，都值得一學。

總結

以上是生活随笔為你收集整理的动态样式语言—LESS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。