Less是一門動態css語言
Less 將 css賦予了動態的語言的特性， 如變量，繼承， 運算， 函數。 Less既可以在客戶端上運行(支持IE6+, Webkit(chrome，safari，opera ), firefox), 也可以藉助Node.js或者Rhino在服務器端運行
下載less
官網下載 http://www.bootcss.com/p/lesscss/#guide 最新版本2.1.2
從git獲取 https://github.com/less/less.js
開始第一個簡單的less
創建一個less文件 如命名爲style.less的文件
在style.less裏面寫入最簡單的代碼
@base: #ffffff;
.header {
color: @base;
}分析定義一個base變量，前綴使用@符號
在 class header裏面調用base變量
使用style.less
創建一個html文件 命名爲less.html
在引入less.js（less.min.js）之前引入style.less 代碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link type="text/css" rel="stylesheet/less" href="less/style.less"> <script type="text/javascript" src="js/less.min.js"></script> </head> <body> </body> </html>
在chorme裏面運行less.html文件 通過F12分析源碼會發現在less文件和 less.js文件中間動態生成了一個style內部樣式 樣式結構如下
. . . . . . 此處省略部分html代碼 . . . . .
<link type="text/css" rel="stylesheet/less" href="less/style.less">
<style type="text/css" id="less:Bootstrap-less-style">
.header {
color: #ffffff;
}
</style>
<script type="text/javascript" src="js/less.min.js"></script>. . . . . . 此處省略部分html代碼 . . . . .
好啦最簡單的less就這麼簡單運行出來了， 你是不是也很有成就感呢