瀏覽器端使用less

官網地址

http://lesscss.cn/

下載

點擊***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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章