摘要：

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

简介：

　　LESS是一种由Alexis Sellier设计的动态层叠样式表语言。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>

参数详解：

async

Type: Boolean
Default: false
是否异步加载重要文件
dumpLineNumbers

Type: String
Options: ''| 'comments'|'mediaquery'|'all'
Default: ''
如果设置了，这增加了源代码行信息输出的CSS文件。这有助于您调试，分析其中一个特定的规则是从哪里来的。
comments 选项用于输出user-understandable内容,
mediaquery 选项用于使用火狐插件解析css文件信息.
env

Type: String
Options: development or production
Default: depends on page URL
运行环境，如果是production，你的css文件将被缓存到本地并且信息不会输出到控制台。如果url以file://开头或者在你本地或者没有标准的端口，这都将被认为是development模式。
例如：
less = { env: 'production' };
errorReporting

Type: String
Options: html|console|function
Default: html
设置编译失败时错误报告的方法。
fileAsync

Type: Boolean
Default: false
当以file协议访问页面，是否异步引入文件
functions

Type: object
用户自定义函数
e.g.
less = {
functions: {
myfunc: function() {
return new(less.tree.Dimension)(1);
}
}
};
可以像Less函数一样使用它。
.my-class {
border-width: unit(myfunc(), px);
}
logLevel

Type: Number
Default: 2
在控制台输出日志的数量。如果是production环境，将不会输出任何信息。
2 - Information and errors1 - Errors0 - Nothing
poll

Type: Integer
Default: 1000
在观察模式下，测试的时间。
relativeUrls

Type: Boolean
Default: false
使用相对路劲。如果设置FALSE，则url是相对根目录文件。
globalVars

Type: Object
Default: undefined
全局变量列表注入代码。“字符串”类型的变量必须显式地包含引号。
less.globalVars = { myvar: "#ddffee", mystr: "\"quoted\"" };
这个选项定义了一个可以被文件引用的变量。这个变量也可以在文件中重新定义。
modifyVars

Type: Object
Default: undefined
Same format as globalVars.
与 globalVars参数含义相反,它将会在你文件最后定义，这意味着它将重写你在文件定义的。
rootpath

Type: String
Default: false
设置根目录，所有的Less文件都会以这个目录开始。
useFileCache

Type: Boolean
Default: true (previously false in before v2)
是否要使用每个会话文件缓存。缓存文件可以使用modifyVars，并且它不会再次检索所有文件。如果您使用观察模式或调用刷新加载设置为true,那么运行之前缓存将被清除。

浏览器端Less的更多相关文章

  1. js接收对象类型数组的服务端、浏览器端实现

    1.服务端 JSONArray jsonArr = JSONUtil.generateObjList(objList); public static generateObjList(List<O ...

  2. 为什么commonjs不适合于浏览器端

    有了服务器端模块以后,很自然地,大家就想要客户端模块.而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行. 但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境.还是上 ...

  3. [SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端

    原文:[SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端 之前开发基于WinForm监控的软件,服务端基于Wcf实现,里面涉及双工模式,在客户端里面,采用心跳包机制保持与服 ...

  4. html5 浏览器端数据库

    为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage  — 本地存储  可 ...

  5. js IndexedDB：浏览器端数据库的demo实例

    IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...

  6. FingerprintJS - 在浏览器端实现指纹识别

    FingerprintJS 是一个快速的浏览器指纹库,纯 JavaScript 实现,没有依赖关系.默认情况下,使用 Murmur Hash 算法返回一个32位整数.Hash 函数可以很容易地更换. ...

  7. angulaijs中的ng-upload-file与阿里云oss服务的结合，实现在浏览器端上传文件到阿里云（速度可以达到1.5M）

    2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前 ...

  8. web开发人员须知的web缓存知识–将数据缓存到浏览器端Net实现

    现实中,服务器在向浏览器发送的数据中,一部分数据是不经常更新的,如果能将这部分数据缓存到浏览器端,将会大大降低传输的数据,提高应用的性能.通过Expires策略,可以使用HTTP 协议定义的缓存机制将 ...

  9. 做web项目时对代码改动后浏览器端不生效的应对方法（持续更新）

    做web项目时,常常会遇到改动了代码,但浏览器端没有生效,原因是多种多样的,我会依据我遇到的情况逐步更新解决的方法 1.执行的时候採用debug模式,普通情况下使用项目部署button右边那个butt ...

  10. 做web项目时对代码修改后浏览器端不生效的应对方法（持续更新）

    做web项目时,经常会遇到修改了代码,但浏览器端没有生效,原因是多种多样的,我会根据我遇到的情况逐步更新解决办法 1.运行的时候采用debug模式,一般情况下使用项目部署按钮右边那个按钮下的tomca ...

随机推荐

  1. A-Frame不如x3dom

    昨天才发现还有A-Frame这么个框架,是Mozilla(moz://a 这个logo挺有创意的)出的,但看了一下其实现方式和语法后,感觉与x3d/x3dom还是有差距的. 二者的实现方式都是基于We ...

  2. gSoap的“error LNK2001: 无法解析的外部符号 _namespaces”解决方法

    错误 2 error LNK2001: 无法解析的外部符号 _namespaces 解决方法: 1. 在工程中定义 WITH_NONAMESPACES 宏 2.尝试 "#include &q ...

  3. 模式匹配之Boyer-Moore算法

    BM 算法是一个较优的模式匹配算法.一般,如果不考虑模式串的长度,一个具有时间复杂度O(n)的算法应该是最优的了,但是事实不是如此.BM算法可以实现更高效率的模式匹配.分析和实验说明,BM匹配算法对于 ...

  4. 组播MAC地址_转

    转自:组播MAC地址 MAC地址是以太网二层使用的一个48bit(6字节十六进制数)的地址,用来标识设备位置.MAC地址分成两部分,前24位是组织唯一标识符(OUI, Organizationally ...

  5. windows已阻止此软件因为无法验证发行者怎么办

    出现提示windows已阻止此软件因为无法验证发行者怎么解决?有的时候访问某些网站会出现类似的提示.导致不能正常运行某个插件,遇到这个问题一般是浏览器的安全级别设置太高了,没有允许脚本控件运行   设 ...

  6. 【linux】——Ubuntu 12.04中文输入法的安装

    Ubuntu 12.04中文输入法的安装   Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu ...

  7. 【C】——可变参数

    写代码之前要先介绍一下可变参数的备用知识: C函数要在程序中用到以下这些宏: void va_start( va_list arg_ptr, prev_param ); type va_arg( va ...

  8. eclipse创建文件夹河包

    资源的平常使用的主要有三种source/fold/package

  9. JAVASCRIPT 之escape 介绍

    escape() 方法:采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字 符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编 ...

  10. 使用 js替换网页中的关键词为链接

    要求把一段html脚本中的疾病名添加到疾病库的链接,只添加一次,要避开超链接或图片链接. 最初是用的    str.replace('糖尿病', '<a href=...>糖尿病</ ...