在浏览器中使用LESSCSS

浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中,尤其是对性能要求比较高的场合,建议使用node或者其它第三方工具先编译成CSS再上线使用。

首先,引入rel属性的值是stylesheet/less的.less样式表。

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下来,下载 less.js并将其包涵在您的页面<head>元素的<script></script>标记中:

<script src="less.js" type="text/javascript"></script>

特别注意

    确保包涵.less样式表在less.js脚本之前
    当你引入多个.less样式表时,它们都是独立编译的。所以,在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。

浏览器选项

你可以引入<script src="less.js"></script>之前通过创建一个全局less对象的方式来指定参数,例如:

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

Learn more about Browser Options
Get Less.js
Browser downloads
Download source code

Get the latest Less.js source code by downloading it directly from GitHub.
Clone or fork via GitHub

Fork the project and send us a pull request!
Install with Bower

Install the Less.js project and JavaScript by running the following in the command line:

bower install less

Less CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.1/less.min.js"></script>

 

posted @ 2015-01-22 11:35  Shimily  阅读(258)  评论(0编辑  收藏  举报