博客原文地址：Claiyre的個(gè)人博客 https://claiyre.github.io/
博客園地址：http://www.cnblogs.com/nuannuan7362/
如需轉(zhuǎn)載，請(qǐng)?jiān)谖恼麻_頭注明原文地址

前言

less作為css語言的擴(kuò)展，賦予了css動(dòng)態(tài)語言的特性，如：變量，繼承，運(yùn)算，函數(shù)等。如果你原本就是程序員，你一定會(huì)非常喜愛less，它可以幫你節(jié)省很多重復(fù)工作，可以讓你像編寫一門動(dòng)態(tài)語言一樣地編寫css。
本文總結(jié)了less的相關(guān)語法和使用方式，可供查閱和入門使用。

正文

語法

變量

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

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

//使用

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

多數(shù)情況下，我們是將這個(gè)變量當(dāng)做一個(gè)常量來使用；less中變量也只能被定義一次這一點(diǎn)使之更像常量。

混合

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

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

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

上面的會(huì)被解析為

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

個(gè)人認(rèn)為混合與傳統(tǒng)OO語言的繼承頗為相似，子類繼承父類的特征的同時(shí)，也可以添加自己專有的特征。

帶參數(shù)的混合

在使用混合時(shí)，less允許給父類傳入?yún)?shù)，參數(shù)使我們可以更加靈活地運(yùn)用混合
比如，可以稍微改動(dòng)上面的.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);
}

還可以設(shè)置參數(shù)的默認(rèn)值，多個(gè)參數(shù)用逗號(hào)隔開：

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

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

在一個(gè)帶參數(shù)的類中，我們可以通過@arguments來獲取傳進(jìn)來的所有參數(shù)，可以整體作為某個(gè)屬性的值。

嵌套規(guī)則

嵌套規(guī)則基于html的文檔結(jié)構(gòu)，可以減少我們對(duì)一些css選擇器的使用，使代碼更易懂，更簡潔。
例如，我們需要設(shè)置這樣的樣式：

.parent{
	background-color: #ff0000;
}

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

用less可以這樣嵌套，文檔結(jié)構(gòu)更加明顯：

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

符號(hào)&,表示“and”，也可以理解為父級(jí)選擇器。

顏色函數(shù)

less提供了多個(gè)顏色運(yùn)算的函數(shù)，非常方便

函數(shù)	功能
lighten(@color,10%)	返回一個(gè)比@color亮10%的顏色
darken(@color,10%)	返回一個(gè)比@color暗10%的顏色
saturate(@color,10%)	返回一個(gè)比@color飽和度高10%的顏色
desaturate(@color,10%)	返回一個(gè)比@color飽和度低10%的顏色
fadein(@color,10%)	返回一個(gè)比@color透明度低10%的顏色，透明度低，顏色更深
fadeout(@color,10%)	返回一個(gè)比@color透明度高10%的顏色，透明度高，顏色更淺
fade(@color,90%)	返回一個(gè)透明度為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混合后的顏色

這些顏色運(yùn)算函數(shù)會(huì)先將顏色轉(zhuǎn)化為HSL色彩空間，然后在通道級(jí)別運(yùn)算

math函數(shù)

less還提供了幾個(gè)math函數(shù)，用來處理數(shù)字

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

匹配模式

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

.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

導(dǎo)引

導(dǎo)引是對(duì)參數(shù)是否滿足一定條件的匹配，不是對(duì)參數(shù)值得匹配。搭配when語句使用。

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

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

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

.class(@a) when(@a){ ... } //僅當(dāng)@a = true 時(shí)才可匹配

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

導(dǎo)入

在文件開頭通過關(guān)鍵字@import導(dǎo)入其他樣式文件

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

@import "style.css"

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

變量作用域

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

注釋

兩種注釋方法，應(yīng)注意其區(qū)別：

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

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

使用

less可以在客戶端使用，也可以在服務(wù)端使用

客戶端使用

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

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

服務(wù)器端使用

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

$ npm install less

// 或安裝最新穩(wěn)定版本的 LESS
 $ npm install less@latest  

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

在命令行中手動(dòng)將less編譯為css文件

$ lessc styles.less > styles.css

結(jié)語

less并未減弱css的任何強(qiáng)大之處，在任何時(shí)候都可以回退至原始css，同時(shí)讓習(xí)慣動(dòng)態(tài)語言的程序員可以更方便地編寫less。與其功能類似的有sass，兩者各有優(yōu)點(diǎn)，都值得一學(xué)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。