官網地址
下載
點擊***Download Source Code***(下載源碼)後得到zip文件,解壓後放入項目中。
使用
編輯一個簡單的less文件。
test.less
@base: #f00;
.ccc{
color: @base
}
@base是設置了一個變量,將類ccc的顏色設爲紅色。
更多用法見:http://lesscss.cn/functions/
編輯html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet/less" type="text/css" href="test.less" />
<script type="text/javascript">
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="/HtmlTest/js/less.js-2.5.3/dist/less.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="ccc">1111111111</div>
</body>
</html>
效果
另一種聲明式的寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="test.less">
<script src="/HtmlTest/js/less.js-2.5.3/dist/less.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="ccc">1111111111</div>
</body>
</html>
寫法上要簡介一些,只是官方給出的例子實在有些少
配置項文檔:http://lesscss.cn/usage/#using-less-in-the-browser-setting-options
順帶一提,官方給出的例子時這個
<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">
先加載js,後加載less。反正我是不知道怎麼讓它運行起來。
顯示編譯後的css代碼
使用谷歌瀏覽器運行後直接F12,可以查看編譯後的css
dumpLineNumbers屬性可以改變輸出的內容,暫時沒發現有什麼實質上的區別。
dumpLineNumbers
Type: String Options: ‘’| ‘comments’|‘mediaquery’|‘all’ Default: ‘’
When set, this adds source line information to the output css file. This helps you debug where a particular rule came from.
The comments option is used for outputting user-understandable content, whilst mediaquery is for use with a firefox extension which parses the css and extracts the information.
In the future we hope this option to be superseded by sourcemaps.
命令行生成css文件
準備好npm環境(沒有的可以直接下載nodejs),安裝less
npm install less -g
通過lessc命令生成css文件
lessc 文件.less > 文件.css
在線編譯地址
http://lesscss.cn/usage/#online-less-compilers
更多第三方編譯工具
http://lesscss.cn/usage/#third-party-compilers