一.簡介
1.less是什么
Less 是一門 一種動態(tài)樣式語言，它擴(kuò)充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。Less 可以運行在 Node和瀏覽器上。
如以下的less代碼：
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
最后會編譯為：
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
2. 在客戶端使用
外聯(lián)樣式：引入你的 .less 樣式文件的時候要設(shè)置 rel 屬性值為 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
內(nèi)聯(lián)樣式如下：
<style type="text/less">
// less 代碼
</style>
接下來 下載 less.js 并通過 <script></script> 標(biāo)簽將其引入，放置于頁面的 <head> 元素內(nèi)：
<script src="less.js" type="text/javascript"></script>
注意：你的less樣式文件一定要在引入less.js前先引入。
備注：請在服務(wù)器環(huán)境下使用！本地直接打開可能會報錯！
監(jiān)視模式
監(jiān)視模式是客戶端的一個功能，這個功能允許當(dāng)你改變樣式的時候，客戶端將自動刷新。
要使用它，只要在URL后面加上'#!watch'，然后刷新頁面就可以了。另外，你也可以通過在終端運行l(wèi)ess.watch()來啟動監(jiān)視模式。
<script>less.watch();</script>
3.在服務(wù)器端使用
在服務(wù)器端安裝 LESS 的最簡單方式就是通過 npm(node 的包管理器), 像這樣
$ npm install less
如果你想下載最新穩(wěn)定版本的 LESS，可以嘗試像下面這樣操作:
$ npm install less@latest
4.使用
只要安裝了 LESS，就可以在Node中像這樣調(diào)用編譯器:
var less = require('less');
less.render('.class { width: 1 + 1 }', function (e, css) {
console.log(css);
});
上面會輸出
.class {
width: 2;
}
你也可以手動調(diào)用解析器和編譯器:
var parser = new(less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});
5.配置
你可以向解析器傳遞參數(shù):
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less' // Specify a filename, for better error messages
});
parser.parse('.class { width: 1 + 1 }', function (e, tree) {
tree.toCSS({ compress: true }); // Minify CSS output
});
6.在命令行下使用
你可以在終端調(diào)用 LESS 解析器:
$ lessc styles.less
上面的命令會將編譯后的 CSS 傳遞給 stdout, 你可以將它保存到一個文件中:
$ lessc styles.less > styles.css
如何你想將編譯后的 CSS 壓縮掉，那么加一個 -x 參數(shù)就可以了.
二.less語法
1.變量
Less中的變量允許你在樣式中的某個地方對常用值進(jìn)行定義，然后應(yīng)用到樣式中，這樣只要改變你定義的變量參數(shù)值就可以達(dá)到改變?nèi)值男Ч覀兿葋砜匆欢未a：
/*======== 定義變量===========*/
@color: #4d926f;
/*======== 應(yīng)用到元素中 ========*/
#header {
color: @color;
}
h2 {
color: @color;
}
以上代碼會編譯為：
/*======= Less 編譯成 css ======*/
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
Less中的變量還具有計算功能，如：
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
編譯為：
#header {color: #6c94be;}
注：在Less中的變量實際上就是一個“常量”，因為它們只能被定義一次。
2.混合
在 LESS 中我們可以定義一些通用的屬性集為一個class，然后在另一個class中去調(diào)用這些屬性. 下面有這樣一個class:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
那如果我們現(xiàn)在需要在其他class中引入那些通用的屬性集，那么我們只需要在任何class中像下面這樣調(diào)用就可以了:
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
.bordered class里面的屬性樣式都會在 #menu a 和 .post a中體現(xiàn)出來:
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
任何 CSS class, id 或者 元素 屬性集都可以以同樣的方式引入。怎么樣，這樣確實很方便很強大吧。
3.帶參數(shù)混合
在 LESS 中，你還可以像函數(shù)一樣定義一個帶參數(shù)的屬性集合:
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
然后在其他class中像這樣調(diào)用它:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
我們還可以像這樣給參數(shù)設(shè)置默認(rèn)值:
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
所以現(xiàn)在如果我們像這樣調(diào)用它的話:
#header {
.border-radius;
}
4.@arguments 變量
Mixins還有一個重要的變量：@arguments。
@arguments在Mixins中具是一個很特別的參數(shù)，當(dāng)Mixins引用這個參數(shù)時，他將表示所有的變量，當(dāng)你不想處理個別的參數(shù)時，這個將很有用，我們來看一個陰影的實例：
.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);
}
以上代碼編譯為：
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
5.模式匹配
有些情況下，我們想根據(jù)傳入的參數(shù)來改變混合的默認(rèn)呈現(xiàn)，比如下面這個例子：
.mixin (@s, @color) { ... }
.class {
.mixin(@switch, #888);
}
如果想讓.mixin根據(jù)不同的@switch值而表現(xiàn)各異，如下這般設(shè)置：
mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}
現(xiàn)在，如果運行:
@switch: light;
.class {
.mixin(@switch, #888);
}
就會得到下列CSS:
class {
color: #a2a2a2;
display: block;
}
如上，.mixin就會得到傳入顏色的淺色。如果@switch設(shè)為dark，就會得到深色。
具體實現(xiàn)如下：
第一個混合定義并未被匹配，因為它只接受dark做為首參
第二個混合定義被成功匹配，因為它只接受light
第三個混合定義被成功匹配，因為它接受任意值
只有被匹配的混合才會被使用。變量可以匹配任意的傳入值，而變量以外的固定值就僅僅匹配與其相等的傳入值。
我們也可以匹配多個參數(shù)：
.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}
6.導(dǎo)引表達(dá)式
當(dāng)我們想根據(jù)表達(dá)式進(jìn)行匹配，而非根據(jù)值和參數(shù)匹配時，導(dǎo)引就顯得非常有用。
為了盡可能地保留CSS的可聲明性，LESS通過導(dǎo)引混合而非if/else語句來實現(xiàn)條件判斷，因為前者已在@media query特性中被定義。
以此例做為開始：
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
when關(guān)鍵字用以定義一個導(dǎo)引序列(此例只有一個導(dǎo)引)。接下來我們運行下列代碼：
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就會得到：
class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
7.導(dǎo)引比較運算
導(dǎo)引中可用的全部比較運算有： > >= = =< <。此外，關(guān)鍵字true只表示布爾真值，下面兩個混合是相同的：
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
除去關(guān)鍵字true以外的值都被視示布爾假：
.class {
.truth(40); // Will not match any of the above definitions.
}
導(dǎo)引序列使用逗號‘,’—分割，當(dāng)且僅當(dāng)所有條件都符合時，才會被視為匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
導(dǎo)引可以無參數(shù)，也可以對參數(shù)進(jìn)行比較運算：
@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
最后，如果想基于值的類型進(jìn)行匹配，我們就可以使用is*函式：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
下面就是常見的檢測函式：iscolor、isnumber、isstring、iskeyword、isurl
如果你想判斷一個值是純數(shù)字，還是某個單位量，可以使用下列函式：ispixel、ispercentage、isem
最后，你可以使用關(guān)鍵詞 and 在 guard 中加入額外的條件:：
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
或者，使用關(guān)鍵詞 not 否定條件：
.mixin (@b) when not (@b > 0) { ... }
8.嵌套規(guī)則
LESS 可以讓我們以嵌套的方式編寫層疊樣式. 讓我們先看下下面這段 CSS:
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
在 LESS 中, 我們就可以這樣寫:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
注意 & 符號的使用—如果你想寫串聯(lián)選擇器，而不是寫后代選擇器，就可以用到&了. 這點對偽類尤其有用如 :hover 和 :focus。
例如：
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
輸出：
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
9.運算
任何數(shù)字、顏色或者變量都可以參與運算. 來看一組例子:
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
LESS 的運算已經(jīng)超出了我們的期望，它能夠分辨出顏色和單位。如果像下面這樣單位運算的話:
@var: 1px + 5;
LESS 會輸出 6px。
括號也同樣允許使用:
width: (@var + 5) * 2;
并且可以在復(fù)合屬性中進(jìn)行運算:
border: (@width * 2) solid black;
