LESS即学即用
前言
我們大家都知道HTML和CSS不屬于編程語言而是屬于標記語言，所以很難像JS一樣定義變量、編寫方法、實現模塊化開發等。而目前的CSS編寫模式中，都是定義一些公共的樣式類名，哪一塊的HTML需要這個樣式，就去增加對應的樣式類名，所以我們經常看到一個標簽上存在很多樣式類名，在這種模式中我們要時常關注CSS的優先級，避免樣式的重疊覆蓋...
為了解決CSS的這一困境，CSS預處理預編譯的思想脫穎而出，比較具有代表性的有LESS、SASS、Stylus。它們在傳統的CSS基礎上增加了大量的新的語法，編寫方式，常用的函數等，可以讓我們的CSS像JS一樣成為一門編程語言。本文主要介紹LESS的語法和使用。
但愿文章對你有些許幫助，歡迎在我的GitHub博客點贊和關注，感激不盡！
一、LESS的編譯
編寫完成的LESS代碼是不能直接在瀏覽器中運行的，需要編譯成正常的CSS代碼。那么我們首先就來學習一下常用的LESS編譯方式。
1.在瀏覽器中調用LESS.JS
LESS只支持在現代瀏覽器中運行（最新版本的Chrome, Firefox, Safari 和 IE）。我們不建議在生產環境中使用LESS客戶端，因為在將LESS編譯成CSS的時候，用戶會看到加載延遲的現象，即便在瀏覽器中有不足一秒的加載延遲，但也會降低性能。
首先引入我們設置樣式的LESS文件，注意：這里的rel='stylesheet/less'
<link type="text/css" rel="stylesheet/less" href="1.less"/> 復制代碼然后引入less.js文件
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script> 復制代碼瀏覽器中調用有個好處:可以開啟監視模式,只要我們的LESS改變，在一定時間內，瀏覽器就會重新的編譯，我們可以看到想要的效果。具體操作如下:
<script charset="utf-8" type="text/javascript">//->在引入LESS之前設置一個全局的變量less,配置一些參數值(根據情況自行選擇需要配置的項)var less = {//->env:設置運行的環境(生產模式還是開發模式)//production:編譯后的CSS緩存到本地localStorage中//development:沒有把編譯后的CSS緩存到本地,在URL不是標準的格式下(例如:file://...),自動設置為developmentenv: "development",//->poll:在監視模式下，每兩次請求之間的時間間隔(ms)poll:500}</script> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script><script charset="utf-8" type="text/javascript">//->啟用監視模式(env必須要設置成development)less.watch();</script> 復制代碼需要特別注意的是，由于瀏覽器端使用時是使用ajax來拉取.less文件，因此直接在本機文件系統打開（即地址是file://開頭）或者是有跨域的情況下會拉取不到.less文件，導致樣式無法生效。所以一般less做css預處理，很少采用引用less的方式，一般是把less編譯成css之后，引用生成的css文件。 // index.html文件 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>less</title><link type="text/css" rel="stylesheet/less" href="css/styles.less"> </head> <body><header><p>Hello World!</p></header> <script src="./less.min.js" type="text/javascript"></script> </body> </html> 復制代碼// styles.less文件 @blue:#5B83AD; @size:50px; header {color: @blue;font-size: @size; } 復制代碼如果直接引入less文件，便會出現如下錯誤：
可以嘗試用一個簡單的web server啟動網站就能解決，譬如lite-server npm install -g lite-server lite-server //to run 復制代碼2、使用NODE命令編譯LESS(單個文件)
這種方式是目前項目中最常用的方式，適用于項目的生產環境，它是把我們的LESS文件編譯成CSS文件，我們項目中直接的引入CSS文件即可，基本步驟：安裝->編譯/壓縮編譯->或者使用NODE代碼實現批量編譯等
把LESS模塊安裝到全局NODE環境中
npm install less -g 復制代碼使用命令進行編譯
//->把styles.less文件編譯成styles.css文件(如果沒有這個CSS文件自己會創建)lessc styles.less styles.css//->編譯完成的CSS文件是經過壓縮的lessc styles.less styles.min.css -x或者--compress 復制代碼經過node命令編譯代碼前后對比:
// styles.less文件(編譯前) @blue:#5B83AD; @size:50px; header {color: @blue;font-size: @size; } 復制代碼// styles.css文件(編譯后) header {color: #5B83AD;font-size: 50px; } 復制代碼3、在NODE環境中編寫批量編譯的代碼
我們在上述用NODE命令編譯的時候，一次只能編譯一個文件，這樣，如果頁面中有多個LESS，每一次編譯都是比較耗費時間的，所以我們結合NODE的FS文件讀寫操作，可以寫一套批量編譯的代碼。
//->定義編譯文件目錄和目標導出目錄var dirPath = "./less/", tarPath = "./css/";//->導入NODE中需要使用的模塊var fs = require("fs"),less = require("less");//->讀取dirPath中的所有文件,檢查文件的類型,只有LESS文件我們才進行存儲var ary = [],files = fs.readdirSync(dirPath);files.forEach(function (file, index) {/\.(LESS)/i.test(file) ? ary.push(file) : null;});//->把目錄下的所有文件進行編譯,把編譯完成的結果保存在指定的目錄中ary.forEach(function (file) {var newFile = file.replace(".less", ".css"),conFile = fs.readFileSync(dirPath + file, "utf-8");less.render(conFile, {compress: true}, function (error, output) {fs.writeFileSync(tarPath + newFile, output.css, "utf-8");});}); 復制代碼4、使用工具編譯LESS
目前常用的編譯工具有：Koala(據說目前最流行的)、在線編譯(tool.oschina.net/less)、SimpLESS等。本篇文章不做過多的說明。
二、LESS的語法
LESS的基礎語法基本上分為以下幾個方面：變量、混合(Mixins)、嵌套規則、運算、函數、作用域等。
1.變量
和JS中的變量一樣，只是LESS的變量定義不是使用VAR而是使用@。
//->LESS代碼@link-color: #428bca;@link-color-hover: darken(@link-color, 10%);a {color: @link-color;&:hover {color: @link-color-hover;}}//->編譯為CSS的結果a {color: #428bca;}a:hover {color: #3071a9;} 復制代碼除了上述用變量存儲公用的屬性值，我們還可以用變量存儲公用的URL、選擇器等等
//->LESS代碼.@{selector} {width: 100px;height: 100px;@{property}: #000;background: url("@{bgImg}/test.png");}@selector: box;@bgImg: "../img";@property: color; 復制代碼2.混合(Mixins)
① 基本使用
混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。
//->LESS代碼.public {width: 100px;height: 100px;}nav ul {.public;list-style: none;}//->編譯為CSS的結果.public {width: 100px;height: 100px;}nav ul {width: 100px;height: 100px;list-style: none;} 復制代碼上述的代碼，nav ul是把public中設定的樣式屬性值copy了一份到自己的樣式中。如果你想在編譯完成的結果中不輸出public這個樣式的結果，只需要按照下述的代碼編寫即可：
//->LESS代碼.public() {//->在選擇器后面加上()就可以不編譯這個樣式了width: 100px;height: 100px;}nav ul {.public;//如果public有子孫元素的樣式，同樣也會被復制過來list-style: none;}//->編譯為CSS的結果nav ul {width: 100px;height: 100px;list-style: none;} 復制代碼② extend
雖然在上述的案例中，nav ul把public中的樣式繼承了過來，但是原理卻是把代碼copy一份過來，這樣編譯后的CSS中依然會存留大量的冗余CSS代碼，為了避免這一點，我們可以使用extend偽類來實現樣式的繼承使用。和原來的選擇器共用一套樣式，但要保證原來的選擇器不加括號。
//->LESS代碼.public {width: 100px;height: 100px;}nav ul {&:extend(.public);list-style: none;}//->編譯為CSS的結果.public, nav ul {width: 100px;height: 100px;}nav ul {list-style: none;} 復制代碼3.嵌套規則
我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，并且代碼看起來更加的清晰。
//->LESS代碼 #header {color: black;.navigation {font-size: 12px;}.logo {width: 300px;&:hover { text-decoration: none }} } 復制代碼//->編譯為CSS的結果 #header { color: black; } #header .navigation {font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover {text-decoration: none; } 復制代碼4.函數 & 運算
運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的復雜關系。LESS中的函數一一映射了JavaScript代碼，如果你愿意的話可以操作屬性值。
任何數字、顏色或者變量都可以參與運算. 來看一組例子:
@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; 復制代碼LESS 提供了一系列的顏色運算函數. 顏色會先被轉化成 HSL 色彩空間, 然后在通道級別操作:
lighten(@color, 10%); // return a color which is 10% *lighter* than @color darken(@color, 10%); // return a color which is 10% *darker* than @color 復制代碼LESS提供了一組方便的數學函數，你可以使用它們處理一些數字類型的值:
round(1.67); // returns `2` ceil(2.4); // returns `3` floor(2.6); // returns `2` 復制代碼5.命名空間和作用域
LESS 中的作用域跟其他編程語言非常類似，首先會從本地查找變量或者混合模塊，如果沒找到的話會去父級作用域中查找，直到找到為止。
@var: red; #page {@var: white;#header {color: @var; // white} } #footer {color: @var; // red } 復制代碼參考文章
LESS學習:了解LESS和編譯LESS
LESS學習:LESS的基礎語法
LESS一種動態樣式語言
總結
- 上一篇： 运维技术之一、supervisorctl
- 下一篇： ServletContextListen