less框架簡介
阿新 • • 發佈:2017-06-01
相對 定義 -s htm 開發 eight 作用域 困難 結構
簡介
CSS(層疊樣式表)是一門歷史悠久的標記性語言,同 HTML 一道,被廣泛應用於萬維網(World Wide Web)中。HTML 主要負責文檔結構的定義,CSS 負責文檔表現形式或樣式的定義。
作 為一門標記性語言,CSS 的語法相對簡單,對使用者的要求較低,但同時也帶來一些問題:CSS 需要書寫大量看似沒有邏輯的代碼,不方便維護及擴展,不利於復用,尤其對於非前端開發工程師來講,往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼,造成這些困難的很大原因源於 CSS 是一門非程序式語言,沒有變量、函數、SCOPE(作用域)等概念。LESS 為 Web 開發者帶來了福音,它在 CSS 的語法基礎之上,引入了變量,Mixin(混入),運算以及函數等功能,大大簡化了 CSS 的編寫,並且降低了 CSS 的維護成本,就像它的名稱所說的那樣,LESS 可以讓我們用更少的代碼做更多的事情。
LESS 原理及使用方式
本 質上,LESS 包含一套自定義的語法及一個解析器,用戶根據這些語法定義自己的樣式規則,這些規則最終會通過解析器,編譯生成對應的 CSS 文件。LESS 並沒有裁剪 CSS 原有的特性,更不是用來取代 CSS 的,而是在現有 CSS 語法的基礎上,為 CSS 加入程序式語言的特性。下面是一個簡單的例子:創建 LESS 文件
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
經過編譯生成的 CSS 文件如下:
#header { color: #4D926F; } h2 { color: #4D926F; }
我 們可以通過 LESS 的編譯器,將 LESS 文件編譯成為 CSS 文件,在 HTML 文章中引入使用。這裏要強調的一點,LESS 是完全兼容 CSS 語法的,也就是說,我們可以將標準的 CSS 文件直接改成 .less 格式,LESS 編譯器可以完全識別。
less框架簡介