浏览器端Less

2024-04-27 14:30:27

字体：大中小

来源：转载

供稿：网友

浏览器端Less

摘要：
　　之前项目用过Less，现在负责的项目也要使用，所以就总结下Less，也方便以后查看。本文主要是讲浏览器端如何使用Less。

简介：
　　LESS是一种由AlexisSellier设计的动态层叠样式表语言。LESS 是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为javaScript。受益于Javascript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。
本质上，LESS包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。LESS并没有裁剪CSS原有的特性，更不是用来取代CSS的，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。你也可以再less文件中写按照css规则写样式。

意义：
改变传统样式的编写方式，以面向对象的方式编写，提高开发效率。

引入LESS：　　
　　首先，引入`rel`属性的值是`stylesheet/less`的`.less`样式表。如下：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
在渲染HTML页面时，less文件需要编译成css文件。我们可以有很多种方法。在服务器端，如Node.js，我们有专门的less编译模块。如果是在客户端，需要从LESS官网下载less.js文件，然后在HTML页面中引入，如下：
<script src="less.js" type="text/javascript"></script>
有了less编译工具，我们就可以渲染页面了。
　　在浏览器中使用less.js开发是很好的，但不推荐用于生产环境中。浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。
注意：
确保包涵`.less`样式表在`less.js脚本之前`
当你引入多个`.less`样式表时，它们都是独立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。
必须通过服务器环境访问页面，否则报错

浏览器选项：

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

<!-- set options before less.js script -->    <script>      less = {          env: "development",          logLevel: 2,          async: false,          fileAsync: false,          poll: 1000,          functions: {},          dumpLineNumbers: "comments",          relativeUrls: false,          globalVars: {            var1: '"string value"',            var2: 'regular value'          },          rootpath: ":/a.com/"        };    </script>    <script src="less.js"></script>

但是这影响所有初始链接标记。你也可以在指定的脚本标签的增加选项，如下：

<script src="less.js" data-env="development"></script>

或者，你也可以在链接配置参数覆盖某些选项，如下：

<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "/"quoted/"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

注意：

以上三种配置参数的优先级为：link标签的>script标签>全局对象
对象属性名称不驼峰
link标签的配置只和时间选项有关，其他不起作用

观察模式：

　　如果使用观察模式，则配置参数的env为development。然后在Less.js文件加载之后调用less.watch()，如下：

<script>less = { env: 'development'};</script><script src="less.js"></script><script>less.watch();</script>

注意：

　　如果启动了观察模式，则浏览器会不断请求less文件，根据Last-Modified参数判断是否重新渲染页面，这会造成很大的性能消耗，所以在线上不要开启观察模式。如果是开发环境，这方便了我们观察效果。你也可以在href后面加上'#!watch'来触发观察模式。

完整demo：

　　reset.less是重置浏览器默认样式，config.js是浏览器选项的配置参数，如下：

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: 1000,         // 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};

index.html

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    <link rel="stylesheet/less" type="text/css" href="./less/reset.less" />    <link rel="stylesheet/less" type="text/css" href="./less/styles.less" />    <script src="./js/config.js"></script>    <script src="./js/less-1.3.3.min.js"></script>    <script>less.watch();</script></head><body></body></html>