本文轉自 http://blog.csdn.net/xuyonghong1122/article/details/51986472
在使用CSS的時候,總會有這個想法
- 這個屬性值老是重復寫好煩
- 這個屬性值我在前面那個CSS文件中寫過,好想直接拿過來用
- CSS能不能像其他程序性語言一樣用一個變量來代替需要重復利用的內容呢
鑒於以上的想法並非我一人會想到,只要是做過前端的肯定都會思考過這個問題,無奈CSS基本可以說沒有語法可依循,於是有了LESS框架
什么是CSS?
作為一門標記性語言，CSS 的語法相對簡單，對使用者的要求較低，但同時也帶來一些問題：CSS 需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利於復用，尤其對於非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼，造成這些困難的很大原因源於 CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念
什么是LESS ?
它在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，並且降低了 CSS 的維護成本，就像它的名稱所說的那樣，LESS 可以讓我們用更少的代碼做更多的事情。
LESS的原理
本質上，LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 CSS 文件。LESS 並沒有裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，為 CSS 加入程序式語言的特性。
環境配置
- 以webStorm為例,在開始使用LESS之前你必須要安裝以下環境
- node.js
- node.js命令行輸入“npm install -g less”安裝less；
- 打開webstorm，File→Settings→Tools→File Watchers,點擊右側綠色“+”號
當然還有一種辦法使用LESS就是直接使用
HBuilder編輯器,自帶LESS插件
開始使用
本例以HBuilder編寫,在我們寫LESS文件的時候會自動幫我們生成CSS文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <link href="css/index.css" rel="stylesheet" /> <body> <div class="index-home"> <span>This is index</span> </div> </body> </html>我們的CSS文件會自動生成,不用做任何修改,我們只需要修改我們的LESS文件即可
上LESS!!!!
@index-color:red; .index-home{ box-sizing: content-box; background-color: @index-color; }寫完之后我們去看一下index.css生成的代碼
是的背景色變成了紅色,我們看一下運行效果
是的,就是這么好使,如果你以為本文結束了,那就錯了,這只能滿足當前頁面引用當前LESS文件中的變量,如何引用其他變量呢?
LESS文件中是可以引用其他LESS文件的,玩過Java的都知道,引用一個類會用到什么關鍵字,沒錯,import,大家准備上車!!!!現在我想在index.less文件中去引用一個基類LESS文件,該如何書寫呢
首先寫base-less.less
-
@base-font-color:white;
在base-less文件中寫一個base-font-color:white來控制文本顏色為白色
在index.less中引用,如下
很簡單明了,引用結束我們看一下效果是怎么樣的
看到這里,有人會問,能不能直接引用LESS文件啊?當然可以啊
我們可以直接在客戶端使用 .less（LESS 源文件），只需要從 http://lesscss.org下載 less.js 文件，然后在我們需要引入 LESS 源文件的 HTML 中加入如下代碼：
LESS 源文件的引入方式與標准 CSS 文件引入方式一樣：
-
<link rel="stylesheet/less" type="text/css" href="index.less"> <link rel="stylesheet/less" type="text/css" href="index.less">
其實LESS是有自己的生命周期的,哦,不好意思,是作用域…
簡單的講就是局部變量還是全局變量的概念，查找變量的順序是先在局部定義中找，如果找不到，則查找上級定義，直至全局。
簡單明了,代碼示例: -
@width : 20px; .index{ @width : 30px; .centerDiv{ width : @width;// 此處應該取最近定義的變量 width 的值 30px } } .leftDiv { width : @width; // 此處應該取最上面定義的變量 width 的值 20px }終於到最后了,最后也是LESS最厲害的作用之一了,你可以把LESS當成JS來玩
-
@import "base-less.less"; @index-color: red; .index-home { box-sizing: content-box; background-color: @index-color; color: @base-font-color; .marginTop(100px); } .marginTop(@distance) { margin-top: @distance; }
可以直接調用”函數”來完成一些屬性的賦值,看下效果如何
看到這里,基本介紹就結束了,LESS確實很方便,另外如果你是一名Android開發者,這個人你一定的關注一下,他的博客都是干貨———-他就是NoHttp的作者:嚴振傑博客地址