less学習-ブラウザ側コンパイル(一)
1510 ワード
1.lessパッケージをダウンロードし、公式サイト
2.lessファイルのインポート
3.configを導入する.js
3.lessを導入する.js
4.less.watch();観察者モードをオンにし、
config.js
test.html
2.lessファイルのインポート
<link rel="stylesheet/less" type="text/css" href="test.less" />3.configを導入する.js
3.lessを導入する.js
4.less.watch();観察者モードをオンにし、
config.js
less = {
env: "development", // or "production"
async: false, // load imports async
fileAsync: false, // load imports async when in a page under
// a file protocol
poll: 10000, // when in watch mode, time in ms between polls
functions: {}, // user functions, keyed by name
dumpLineNumbers: "all", // "comment" or "mediaQuery" or "all"
relativeUrls: false, // whether to adjust url's to be relative
// if false, url's are already relative to the
// entry less file
rootpath: ":/" // a path to add on to the start of every url
//resource
};
test.html
<!DOCTYPE html>
<html>
<head>
<title>hah</title>
<link rel="stylesheet/less" type="text/css" href="test.less" />
<link rel="stylesheet/less" type="text/css" href="test2.less" />
<script src="./config.js"></script>
<script src="dist/less.js"></script>
<script>less.watch();</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>