LESS

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充。

2009由我的開發，2012年由團隊開發，現現在最新版本爲3.x。

CSS（層疊樣式表）是一門歷史悠久的標記性語言，同 HTML 一道，被普遍應用於萬維網（World Wide Web）中。HTML 主要負責文檔結構的定義，CSS 負責文檔表現形式或樣式的定義。 做爲一門標記性語言，CSS 的語法相對簡單，對使用者的要求較低，但同時也帶來一些問題：CSS 須要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利於複用，尤爲對於非前端開發工程師來說，每每會由於缺乏 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼，形成這些困難的很大緣由源於 CSS 是一門非程序式語言，沒有變量、函數、SCOPE（做用域）等概念。LESS 爲 Web 開發者帶來了福音，它在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，而且下降了 CSS 的維護成本，就像它的名稱所說的那樣，LESS 可讓咱們用更少的代碼作更多的事情。[1]

LESS 原理及使用方式 編輯

本質上，LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義本身的樣式規則，這些規則最終會經過解析器，編譯生成對應的 CSS 文件。LESS 並無裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，爲 CSS 加入程序式語言的特性。

 

less客戶端

咱們能夠直接在客戶端使用 .less（LESS 源文件），只須要從http://lesscss.org下載 less.js 文件，而後在咱們須要引入 LESS 源文件的 HTML 中加入以下代碼： <link rel="stylesheet/less" type="text/css" href="styles.less"> LESS 源文件的引入方式與標準 CSS 文件引入方式同樣： <link rel="stylesheet/less" type="text/css" href="styles.less"> 須要注意的是：在引入 .less 文件時，rel 屬性要設置爲「stylesheet/less」。還有更重要的一點須要注意的是：LESS 源文件必定要在 less.js 引入以前引入，這樣才能保證 LESS 源文件正確編譯解析。

 

less服務器端

LESS 在服務器端的使用主要是藉助於 LESS 的編譯器，將 LESS 源文件編譯生成最終的 CSS 文件，目前經常使用的方式是利用 node 的包管理器 (npm) 安裝 LESS，安裝成功後就能夠在 node 環境中對 LESS 源文件進行編譯。 在項目開發初期，咱們不管採用客戶端仍是服務器端的用法，咱們都須要想辦法將咱們要用到的 CSS 或 LESS 文件引入到咱們的 HTML 頁面或是橋接文件中，LESS 提供了一個咱們很熟悉的功能— Importing。咱們能夠經過這個關鍵字引入咱們須要的 .less 或 .css 文件。 如： @import 「variables.less」; .less 文件也能夠省略後綴名，像這樣： @import 「variables」; 引入 CSS 同 LESS 文件同樣，只是 .css 後綴名不能省略。

 

less使用編譯生成的靜態 CSS 文件

咱們能夠經過 LESS 的編譯器，將 LESS 文件編譯成爲 CSS 文件，在 HTML 文章中引入使用。這裏要強調的一點，LESS 是徹底兼容 CSS 語法的，也就是說，咱們能夠將標準的 CSS 文件直接改爲 .less 格式，LESS 編譯器能夠徹底識別。