LESS學習和使用

我們都知道HTML和CSS不是程式語言，而是標記語言，所以很難像JS那樣定義變數、編寫方法、實現模組化開發等。 在目前的CSS編寫模式中，我們定義了一些常用的樣式類名，哪一塊HTML需要這個樣式，並新增相應的樣式類名，所以我們經常會看到乙個標籤上有很多樣式類名，在這種模式下我們必須時刻注意CSS的優先順序，避免重疊的樣式覆蓋。

為了解決CSS的這個困境，CSS預處理和預編譯的思想脫穎而出，比較有代表性的有less、sass和stylus。 他們在傳統的CSS中增加了大量的新的語法、寫作方法、常用函式等，可以使我們的CSS成為像JS一樣的程式語言。 本文重點介紹 less 的語法和用法。

寫出的少**不能直接在瀏覽器中執行，需要編譯成普通的css**，所以先來學習習常見的少編譯方法。

Less 僅適用於現代瀏覽器（最新版本的 Chrome、Firefox、Safari 和 IE）。 我們不建議在生產中使用 LESS 客戶端，因為使用者在將 LESS 編譯為 CSS 時會看到載入延遲，即使瀏覽器中的載入延遲不到一秒。

讓我們首先介紹我們設定樣式的 less 檔案注意：rel='stylesheet/less'

// index.HTML 檔案 Hello World！

// styles.減少檔案@blue：5b83ad;@size:50px;header

npm install -g lite-serverlite-server //to run

將 less 模組安裝到全域性節點環境中。

npm install less -g

->看跌期權樣式更少的檔案編譯成樣式CSS 檔案（如果您沒有此 CSS 檔案，您將自行建立） LESSC 樣式less styles.CSS ->編譯的CSS檔案是壓縮的Lessc Stylesless styles.min.css -x 或 --compress

// styles.更少檔案（預編譯） @blue： 5b83ad;@size:50px;header

// styles.CSS 檔案（編譯後）標頭

-> 定義編譯檔案目錄和目標匯出目錄 var dirpath ="./less/", tarpath = "./css/";->匯入匯入節點中需要用到的模組 var fs = require（）"fs"), less = require("less");->讀取 dirpath 中的所有檔案，檢查檔案型別，只檢查我們儲存的檔案更少 var ary = files = fsreaddirsync(dirpath); files.foreach（function （file， index） ） ） ->編譯目錄下的所有檔案，並將編譯後的結果儲存在指定目錄下 aryforeach(function (file) ,function (error, output) )

與 JS 中的變數一樣，較少的變數定義使用 @ 而不是 var

//->less **link-color: #428bca; @link-color-hover: darken(@link-color, 10%);a } ->編譯成css的結果 a a：hover

//->less **#000; background: url("@/test.png"); selector: box; @bgimg: "../img"; @property: color;

->less **public n** ul ->編譯為 css 的結果public n** ul

->less **public（） n** ul ->編譯為 css n** ul 的結果

->less **public n** ul ->編譯為 css 的結果public, n** ul n** ul

//->less **#header .logo }

->編譯為 css header header 的結果n**igation #header .logo #header .logo:hover

可以涉及任何數字、顏色或變數。 讓我們看一組示例：

@base: 5%;@filler: @base * 2;@other: @base + filler;color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + filler;

lighten(@color, 10%);// return a color which is 10% *lighter* than @colordarken(@color, 10%);// return a color which is 10% *darker* than @color

round(1.67); // returns `2`ceil(2.4); // returns `3`floor(2.6); // returns `2`

@var: red;#page }#footer