最近關於less sass的新手總結

less 是基於CSS的一種擴展技術
.less 透過解析器（如koala）轉換檔案格式為CSS
@+變數名稱+值
語法
變數
LESS 允許開發者自訂變量，變數可以在全域樣式中使用，變數使得樣式修改起來更加簡單。
我們可以從下面的程式碼中了解變數的使用及功能：
清單 3 LESS 檔案
@border-color : #b5bcc7;

.mythemes tableBorder{
border : 1px solid @border-color;
}
經過編譯產生的CSS 檔案如下：
清單4. CSS 檔案
.mythemes tableorder { bcc f的程式碼中我們可以看出，變數是VALUE（值）等級的複用，可以將相同的值定義成變數統一管理起來。
此特性適用於定義主題，我們可以將背景顏色、字體顏色、邊框屬性等常規樣式進行統一定義，這樣不同的主題只需要定義不同的變數檔案就可以了。當然該特性也同樣適用於CSS RESET（重置樣式表），在Web 開發中，我們往往需要屏蔽瀏覽器預設的樣式行為而需要重新定義樣式表來覆蓋瀏覽器的預設行為，這裡可以使用LESS 的變數特性，這樣就可以在不同的項目間重複使用樣式表，我們只需要在不同的項目樣式表中，依照需求重新賦值給變數即可。
LESS 中的變數和其他程式語言一樣，可以實現值的複用，同樣它也有生命週期，也就是Scope（變數範圍，開發人員慣稱之為作用域），簡單的講就是局部變數還是全域變量的概念，找出變數的順序是先在局部定義中找，如果找不到，則找上級定義，直到全域。下面我們透過一個簡單的例子來解釋 Scope。
清單5. LESS 檔案
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @widthth
#centerDiv{
width : @widthth;// 此處應該取一個最近定義的變數
#leftDiv {
width : @width; // 這裡應該取最上面定義的變數width 的值20px

}
經過編譯後產生的CSS 檔案如下：

清單6. CSS 檔案

#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20pidth
）功能對用開發者來說並不陌生，許多動態語言都支援Mixins（混入）特性，它是多重繼承的一種實現，在LESS 中，混入是指在一個CLASS 中引入另外一個已經定義的CLASS ，就像在目前CLASS 中增加一個屬性一樣。
我們先簡單看一下Mixins 在LESS 中的使用：
清單7. LESS 檔案
// 定義一個樣式選擇器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
- webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的樣式選擇器中使用
#header {
.roundedCorners;
}
#footerpfidee #footof， ;
}
經過編譯後產生的CSS 檔案如下：
清單8. CSS 檔案
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-
-webkit-border-radius:5px;
border-radius:5px; }
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
從上面的程式碼我們可以看出：Mixins 其實是一種嵌件套，它允許將一個類別嵌入到另外一個類別中使用，被嵌入的類別也可以稱作變量，簡單的講，Mixins 其實是規則層級的複用。
Mixins 還有一種形式稱為Parametric Mixins（混入參數），LESS 也支援這個特性：
清單9. LESS 檔案
// 定義一個樣式選擇器
.borderRadius(@radius){
-moz-border-radiusius : @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定義的樣式選擇器
#header {
.borderRadius(10px);作為參數傳遞給樣式選擇器
}
.btn {
.borderRadius(3px);// // 把3px 作為參數傳遞給樣式選擇器

}
经过编译生成的 CSS 文件如下：
清单 10. CSS 文件
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
我们还可以给 Mixins 的参数定义一人默认值，如
清单 11. LESS 文件
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
经过编译生成的 CSS 文件如下：
清单 12. CSS 文件
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
清单 13. LESS 文件
.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);
}
经过编译生成的 CSS 文件如下：
清单 14. CSS 文件
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
Mixins 是 LESS 中很重要的特性之一，这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：
清单 15. LESS 文件
#mynamespace {
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
嵌套的规则
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
清单 16. HTML 片段

top

left

right

清單 17. LESS 檔案
#home{
顏色: 藍色;
寬度：600px;
高度：500px;
邊框：開始；
#top{

邊框：開始； #center{
邊框：開始；
高度：300px；
寬度：90%；
#left{
邊框：開始；
浮動：向左；
寬度：40%； ；
}：向左；
寬度：40%；
}
}
}
編譯生成後的CSS 檔案如下：
清單18. CSS 檔案
#home {
color: blue; ：500px；
邊框：開始；
}
#home #top {
邊框：開始；
寬度：90%;
}
#home #center {
邊框：開始； ;
}
#home #center #left {
邊框：開始；
浮動：向左；
寬度：40%;
}
#home #center #right {
邊框：開始；寬度：40%；
}
從上面的程式碼我們可以看出，LESS 的書寫規則的書寫方式是HTML 中的DOM 結構相對應的，這使得我們的樣式表書寫更加簡潔和更好的約束性。同時，嵌套規則使得對偽元素的操作更加方便。
清單19. LESS 文件
a {
color: red;
文字裝飾：無；
&:hover {// 有& 時解析是同一個元素或此元素偽的類，沒有& 解析是後代元素
color : black;
文字修飾：底線；
}
}
編譯產生的CSS 檔案如下：
清單20. CSS 檔案
a {
color: red;
文字裝飾：無；
a {
color: red;
文字裝飾：無；
：黑色；
文字修飾：下劃線；
}
塗層及函數
在我們的CSS 中充斥著大量的數值型的值，例如color、padding、margin 等，這些數值之間在某些情況下是有一定關係的，所以我們怎麼用LESS 來組織我們這些數值之間的關係嗎？我們來看看可能的程式碼：
清單21 .更少的檔案
@init: #111111;
@transition: @init*2;
.switchColor {
顏色：@transition;
}
如下：
清單22. CSS 檔案
.switchColor {
color: #22222;
}
上面的例子中使用LESS 的操作是特性，其實簡單的，就是對數值型的值（數字、顏色、講變數等）進行加減乘除四則攻擊。同時 LESS 還有一個專門針對顏色的操作提供一組函數。以下是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% 的顏色
spin(@ color, 10); // 回色調比@color 大10 度的顏色
spin(@color, -10); // 回傳比@color色相小10度的顏色
PS:庫存代碼引自LESS CSS 官方網站，詳情請見http://lesscss.org/#-color-functions
使用這些函數和JavaScript 中使用函數一樣。
清單23 LESS 檔案
init: #f04615;
#body {
背景顏色：fadein(@init, 10%);
}
經過編譯後產生的CSS 檔案如下：
清單24. CSS 電腦
# background-color: #f04615;
}
從上面的例子我們可以發現，這組函數就像極了JavaScript 中的函數，它可以被呼叫和傳遞參數。這些函數的主要作用是提供顏色轉換的功能，先把顏色轉換成 HSL 顏色，然後在此基礎上進行操作，LESS 還提供了獲取顏色值的方法，這裡不舉例說明了。
LESS 提供的攻擊及函數特性適用於實現頁面組件特性，例如組件切換時的漸進漸進
註釋（註釋）
適當的註釋是保證代碼有效性的必要手段，少對註釋也提供了支持，主要有兩種方式：單行註解和多行註釋，這與JavaScript 中的註解方法相同，我們在這裡不做詳細的說明，只強調一點：LESS 中單行註解(// 單行註解) 不能在編譯後的CSS中顯示，所以如果您的註解是針對樣式說明的請使用多行註解。
LESS VS SASS
同類框架還有SASS 與LESS 相比，兩者都屬於CSS 預處理器，功能上大同小異，都是使用類似程式語言的方式書寫CSS, 都具有變數、混入、嵌套、繼承等特性，最終目的都是方便CSS 的書寫及維護。
LESS 和 SASS 互相促進互相影響，相較之下 LESS 比較接近 CSS 文法