浏览器端如何使用Less,需要的朋友可以参考下

1、浏览器端如何使用less,需要的朋友可以参考下之前项目用过less，现在负责的项目也要用法，所以就总结下less，也便利以后查看。本文主要是讲扫瞄器端如何用法less。简介：less是一种由alexis sellier设计的动态层叠样式表语言。less 是开源的，其第一个版本由ruby写成，但在后续的版本当中，ruby逐渐被替换为javascript。受益于javascript，less可以在客户端上运行（ie6+、webkit、firefox），也可以在服务端运行（node.js、rhino）。 本质上，less 包含一套自定义的语法及一个解析器，用户按照这些语法定义自己的样式规章，这些规章

2、终于会通过解析器，编译生成对应的 css 文件。less 并没有裁剪 css 原有的特性，更不是用来取代 css 的，而是在现有 css 语法的基础上，为 css 加入程序式语言的特性。你也可以再less文件中写根据css规章写样式。 意义： 转变传统样式的编写方式，以面对对象的方式编写，提高开发效率。 引入less：首先，引入rel属性的值是stylesheet/less的.less样式表。如下： 复制代码代码如下: 在渲染html页面时，less文件需要编译成css文件。我们可以有无数种办法。在服务器端，如node.js，我们有特地的less编译模块。假如是在客户端，需要从less官网下载

3、less.js文件，然后在html页面中引入，如下： 复制代码代码如下: 有了less编译工具，我们就可以渲染页面了。在扫瞄器中用法less.js开发是很好的，但不推举用于生产环境中。扫瞄器端用法是在用法less开发时最直观的一种方式。假如是在生产环境中，尤其是对性能要求比较高的场合，建议用法node或者其它第三方工具先编译成css再上线用法。注重：确保包容.less样式表在less.js脚本之前当你引入多个.less样式表时，它们都是自立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件分享。必需通过服务器环境拜访页面，否则报错扫瞄器选项：你可以引入之前通过创建一个全局l

4、ess对象的方式来指定参数，例如： 复制代码代码如下:less = env: "development",loglevel: 2,async: false,fileasync: false,poll: 1000,functions: ,dumplinenumbers: "comments",relativeurls: false,globalvars: var1: '"string value"',var2: 'regular value',rootpat

5、h: ":/; 但是这影响全部初始链接标志。你也可以在指定的脚本标签的增强选项，如下： 复制代码代码如下: 或者，你也可以在链接配置参数笼罩某些选项，如下： 复制代码代码如下: 注重：以上三种配置参数的优先级为：link标签的>script标签>全局对象对象属性名称不驼峰link标签的配置只和时光选项有关，其他不起作用观看模式：假如用法观看模式，则配置参数的env为development。然后在less.js文件加载之后调用less.watch()，如下： 复制代码代码如下:less = env: 'development'less.watch()

6、; 注重： 假如启动了观看模式，则扫瞄器会不断哀求less文件，按照last-modified参数推断是否重新渲染页面，这会造成很大的性能消耗，所以在线上不要开启观看模式。假如是开发环境，这便利了我们观看效果。你也可以在href后面加上'!watch'来触发观看模式。 完整demo： reset.less是重置扫瞄器默认样式，config.js是扫瞄器选项的配置参数，如下：config.js 复制代码代码如下:less = env: "development", / or "production"async

7、: false, / load imports asyncfileasync: false, / load imports async when in a page under/ a file protocolpoll: 1000, / when in watch mode, time in ms between pollsfunctions: , / user functions, keyed by namedumplinenumbers: "all", / "comment" or "mediaque

8、ry" or "all"relativeurls: false,/ whether to adjust url's to be relative/ if false, url's are already relative to the/ entry less filerootpath: ":/"/ a path to add on to the start of every url/resource; index.html 复制代码代码如下:less.watch(); 参数详解：async

9、type: booleandefault: false是否异步加载重要文件dumplinenumberstype: stringoptions: ''| 'comments'|'mediaquery'|'all'default: ''假如设置了，这增强了源代码行信息输出的css文件。这有助于您调试，分析其中一个特定的规章是从哪里来的。comments 选项用于输出user-understandable内容,mediaquery 选项用于用法火狐插件解析css文件信息.envtype: stringoptions:

10、development or productiondefault: depends on page url运行环境，假如是production，你的css文件将被缓存到本地并且信息不会输出到控制台。假如url以file:/开始或者在你本地或者没有标准的端口，这都将被认为是development模式。例如：less = env: 'production' ;errorreportingtype: stringoptions: html|console|functiondefault: html设置编译失败时错误报告的办法。fileasynctype: booleandefault

11、: false当以file协议拜访页面，是否异步引入文件functionstype: object用户自定义函数e.g.less = functions: myfunc: function() return new(less.tree.dimension)(1);可以像less函数一样用法它。.my-class border-width: unit(myfunc(), px);logleveltype: numberdefault: 2在控制台输出日志的数量。假如是production环境，将不会输出任何信息。2 - information and errors1 - errors0 - no

12、thingpolltype: integerdefault: 1000在观看模式下，测试的时光。relativeurlstype: booleandefault: false用法相对路劲。假如设置false，则url是相对根名目文件。globalvarstype: objectdefault: undefined全局变量列表注入代码。字符串类型的变量必需显式地包含引号。less.globalvars = myvar: "ddffee", mystr: "/"quoted/"" ;这个选项定义了一个可以被文件引用的变量。这个变量也可以在文件中重新定义。modifyvarstype: objectdefault: undefinedsame format as globalvars.与 globalvars参数含义相反,它将会在你文件最后定义，这意味着它将重写你在文件定义的。rootpathtype: stringdefault: