1. 程式人生 > >less框架簡介

less框架簡介

相對 定義 -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框架簡介