LESS CSS學習

LESS的存在主要用於解決CSS的問題，包括不方便維護擴充、不利於複用等，因為CSS是一門非程式式語言，沒有變數、函數、範圍等概念，而LESS在CSS文法的基礎上，引入了變數、運算以及函數等功能，簡化了CSS的編寫，降低了維護 成本。

LESS可以直接在用戶端使用，也可以在伺服器端使用，但是更推薦將LESS編譯產生靜態CSS檔案，在HTML文檔中應用。

首先下載LESS.JS檔案（http://lesscss.org），然後在HTML中加入

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

<script src="less.js" type="text/javascript"></script>

注意一定要先引入樣式檔案後引入指令檔

LESS文法規則

1.變數

LESS中變數用@定義，@BLUE:#00C;

（SASS中使用$）

2.混合

把兩個樣式融合成一個樣式

.classa{}

.classb{

.classa;

}

這樣調用B的時候就包括了A樣式，在SASS中，需要在樣式規則前添加@mixin聲明.

@minxin classa{

}

classb{

@include classa;

}

3.帶參數混合

帶參數混合就像函數一樣，適用於不同瀏覽器的相容問題

.border-radius( @radius: 3px ) {  -webkit-border-radius: @radius;  -moz-border-radius: @radius;  border-radius: @radius;}

這樣只要寫一個radius就可以了。

4.選取器繼承

.classA{}

.classB{

@extend .classA;

}

相當於.classA ， .classB{}

5.嵌套規則

如果你不想要一個複雜的嵌套 .A .B .C{}

可以直接嵌套把所有的樣式都寫了

.A{

...

.B{...

&:visited{...}

//還可用&來引用元素樣式到虛擬元素上

}

}

6.運算

@border:10px;

@half_border:@border/2

很好理解，在LESS中可以直接對變數做運算，在SASS中甚至可以對不同單位的變數進行運算

7.color函數

color函數是用來對已有顏色進行變化的，包括lighten(減輕顏色)、darken(加深顏色)等

8.條件陳述式和控制

很遺憾在LESS中不支援條件陳述式和控制，不過使用SASS可以。包括if else for and or not = > <==等都可以使用

@if $color>30% {

...

}

@else{

...

}

9.命名空間

命名空間用於給CSS樣式分組

#defaults{

.classa{}

.classb{}

}

h1{

#default >.classa;

}

10.範圍

LESS中的範圍可以理解為ROOT級（全域可用）和選取器層級.互不影響

11.匯入

標準的@import 'class.less'即可

12.字串插入

@url='www.csdn.com'

字串通過@{url}來調用，比變數多了個{ }

13.轉義

14.js運算式

@height='document.body.clientHeight'

15.輸出格式

參考資料：

1.https://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

2.中文譯文：http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html著作權歸作者所有。
商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html © w3cplus.com