LESS 用法入門
本文旨在加深對 LESS 的理解和記憶，供自己開發時參考。相信對沒有接觸過 LESS 的程序員還是有用的，大佬繞路。
一、 安裝和使用 LESS
1.1 安裝
使用命令行安裝 LESS
npm install -g less
2.1 使用
less 有多種的使用方法，在這裏我向大家介紹最常用的倆種方法。
第一種是直接在瀏覽器中使用：
- 去下載一個你要的 less.js 腳本；
- 創建一個文件來放置你的樣式，比如說style.less
- 添加下面的代碼到你的 HTML 的 <head> 中。
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
請註意“link”的“rel”屬性。你需要在屬性值後面使用“/less”，LESS才起作用。你也需要在“link”樣式表後面引入"script"。如果你正在使用“HTML5”語法，我無法想像為什麽你不會用呢？你可以少去“type=‘text/css’”和“type=‘text/javascript‘”。
第二種就是在命令行中使用：
lessc style.less style.css
然後會在項目目錄生成 style.css 文件，在 html 中引入即可。如果在編譯過程中出現錯誤，將會在命令行中提示你。
Less 是用 JavaScript 寫的，所以需要額外的 Node.jsless.js ，這樣在真正的運行環境下它就可以自動編譯，但這個過程非常緩慢，所以不建議這麽使用。 推薦的方式是提前編譯成 CSS 代碼並且將一個正常的發展版本備份在線上。當然還有很多可視化的的程序幫助你編譯 less 文件，但是在本篇文章中我們將使用 node.js。
二、基本用法
2.1 變量
Less 的一個主要功能就是可以讓你像在其它高級語言中一樣聲明變量，這樣你就可以存儲你經常使用的任何類型的值 ： 顏色，尺寸，選擇器，字體名稱和 URL 等。less 的哲學是在可能的情況下重用CSS語法。
這裏，我們聲明了兩個變量，一個是背景顏色，一個是文本顏色，它們都是十六進制的值。less 代碼如下：
@background-color: #ffffff; @text-color: #1A237E; .box{ width: 500px; height: 500px; background-color: @background-color; } p{ color: @text-color; }
編譯後的 css 代碼如下：
.box { width: 500px; height: 500px; background-color: #ffffff; } p { color: #1A237E; }
在上面的例子當中，背景顏色是白色，文本顏色是黑色。比方說，現在我們要切換二者的值，也就是黑色的背景和白色的文本，我們只需要修改兩個變量的值就可以了，而不是手動的去修改每個值。
閱讀更多有關 Less 變量的內容，請看這裏。
2.2 Mixins
Less 允許我們將已有的 class 和 id 的樣式應用到另一個不同的選擇器上。 下面這個例子可以清楚地說明這一點。
#circle{ background-color: #4CAF50; border-radius: 100%; } #small-circle{ width: 50px; height: 50px; #circle } #big-circle{ width: 100px; height: 100px; #circle }
轉換成 css 代碼如下：
#circle { background-color: #4CAF50; border-radius: 100%; } #small-circle { width: 50px; height: 50px; background-color: #4CAF50; border-radius: 100%; } #big-circle { width: 100px; height: 100px; background-color: #4CAF50; border-radius: 100%; }
如果你不想 mixin 也以一種規則的形式出現在 CSS 代碼中，那麽你可以在它的後面加上括號：
#circle(){ background-color: #4CAF50; border-radius: 100%; } #small-circle{ width: 50px; height: 50px; #circle } #big-circle{ width: 100px; height: 100px; #circle }
此時編譯成 CSS :
#small-circle { width: 50px; height: 50px; background-color: #4CAF50; border-radius: 100%; } #big-circle { width: 100px; height: 100px; background-color: #4CAF50; border-radius: 100%; }
Mixin 另一個比較酷的功能就是它支持傳入參數，下面這個例子就為 circle 傳入一個指定寬高的參數，默認是 25px。 這將創建一個 25×25的小圓和一個 100×100 的大圓。
#circle(@size: 25px){ background-color: #4CAF50; border-radius: 100%; width: @size; height: @size; } #small-circle{ #circle } #big-circle{ #circle(100px) }
轉換成 CSS :
#small-circle { background-color: #4CAF50; border-radius: 100%; width: 25px; height: 25px; } #big-circle { background-color: #4CAF50; border-radius: 100%; width: 100px; height: 100px; }
在 官方文檔 了解更多關於 mixin 的知識。
2.3 嵌套
嵌套可用於以與頁面的HTML結構相匹配的方式構造樣式表，同時減少了沖突的機會。下面是一個無序列表的例子。
ul{ background-color: #03A9F4; padding: 10px; list-style: none; li{ background-color: #fff; border-radius: 3px; margin: 10px 0; } }
編譯成 CSS 代碼：
ul { background-color: #03A9F4; padding: 10px; list-style: none; } ul li { background-color: #fff; border-radius: 3px; margin: 10px 0; }
就像在其它高級語言中一樣， Less 的變量根據範圍接受它們的值。如果在指定範圍內沒有關於變量值的聲明， less 會一直往上查找，直至找到離它最近的聲明。
回到 CSS 中來，我們的 li 標簽將有白色的文本，如果我們在 ul 標簽中聲明 @text-color 規則。
@text-color: #000000; ul{ @text-color: #fff; background-color: #03A9F4; padding: 10px; list-style: none; li{ color: @text-color; border-radius: 3px; margin: 10px 0; } }
編譯生成的 CSS 代碼如下：
ul { background-color: #03A9F4; padding: 10px; list-style: none; } ul li { color: #ffffff; border-radius: 3px; margin: 10px 0; }
在 這裏 了解更多關於作用域的知識。
2.4 運算
你可以對數值和顏色進行基本的數學運算。比如說我們想要兩個緊鄰的 div 標簽，第二個標簽是第一個標簽的兩倍寬並且擁有不同的背景色。
@div-width: 100px; @color: #03A9F4; div{ height: 50px; display: inline-block; } #left{ width: @div-width; background-color: @color - 100; } #right{ width: @div-width * 2; background-color: @color; }
編譯成 CSS 如下：
div { height: 50px; display: inline-block; } #left { width: 100px; background-color: #004590; } #right { width: 200px; background-color: #03a9f4; }
2.5 函數
Less 中有函數，這讓它看起來像一門編程語言了，不是嗎？
讓我們來看一下 fadeout， 一個降低顏色透明度的函數。
@var: #004590; div{ height: 50px; width: 50px; background-color: @var; &:hover{ background-color: fadeout(@var, 50%) } }
編譯成 CSS 如下所示：
div { height: 50px; width: 50px; background-color: #004590; } div:hover { background-color: rgba(0, 69, 144, 0.5); }
通過上述代碼，當我們將鼠標懸浮在 div 上時，就可以獲取半透明度的動畫效果，這比之前自己手動設置要簡單的多了。還有很多有用的函數去操縱顏色，檢測圖像的大小，甚至將資源作為 data-uri 嵌入樣式表，在 這裏 查看這些函數的列表。
2.6 作用域（scope）
作用域是程序中的一個標準，LESS中也是。如果你在你樣式表的root級聲明一個變量，它在整個文檔中都是可以調用的。然而，如果你在一個選擇器，比如id或者class中，重新定義了這個變量，那麽，它就只能在這個選擇器中可用了——當然是重新定義後的新值。
@color: #00c; /* 藍色 */ #header { @color: #c00; /* 紅色 */ border: 1px solid @color; /* 紅色邊框 */ } #footer { border: 1px solid @color; /*藍色邊框 */ }
因為我們在 #header 中重新定義了 color 變量，變量的值將會是不同的而且只會在該選擇器中有效。它之前或者之後的所有地方，如果沒有被重新定義，都會保持那個原始的值。
2.7 註解
LESS 中允許兩種註釋寫法。標準的CSS註釋，/* comment */，是有效的，而且能夠通過處理並正確輸出。當行註釋，// comment，同樣可以用但是不能夠通過處理也不能被輸出。
2.8 導入
導入也相當符合標準。標準的 @import ‘classes.less’; 處理的很好。然而，如果你想要導入其它的 LESS 文件，那麽文件的擴展名是可選的，所以 @import ‘classes’; 也是可行的。如果你想要導入一些無需LESS 處理的內容，你可以使用 .css 擴展 (比如， @import ‘reset.css’;)。
三、LESS 和 SASS 區別
之前寫過一篇 sass 的入門，所以肯定有不少人會問這倆的區別。在這我說一下我的見解，可能不全。
LESS和Sass之間的主要區別是他們的實現方式不同，LESS是基於JavaScript運行,所以LESS是在客戶端處理。Sass是基於 Ruby 的，是在服務器端處理的。很多開發者不選擇LESS是因為LESS輸出修改過的CSS到瀏覽器需要依賴於Javascript引擎，而Javascript引擎需要額外的時間來處理代碼。當然在其它方面也是有一點小差別，例如; 在變量上LESS使用@，而Sass使用$，同時還有一些作用域上的差別。輸出格式上sass 提供4種輸出選項：nested, compact, compressed 和 expanded，然而 less 並沒有輸出設置................
更多 LESS 和 SASS 區別可以參考：
https://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html
LESS 用法入門