浏览器端Less

简介: 浏览器端Less


摘要:


  

之前项目用过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,那么运行之前缓存将被清除。

 

相关文章
|
4天前
|
安全
浏览器安全
采用匿名方式浏览,你在登录网站时会产生一种叫cookie(即临时文件,可以保存你浏览网页的痕迹)的信息存储器,许多网站会利用cookie跟踪你在互联网上的活动。 你可以在使用浏览器的时候在参数选项中选择关闭计算机接收cookie的选项。(打开E浏览器,点击“工具”—“Internet选项”,在打开的选项中,选择“隐私”,保持“Cookies”该复选框为未选中状态,点击按钮"确定")
|
2月前
|
Web App开发 搜索推荐 iOS开发
浏览器
浏览器
60 1
|
7月前
|
UED 开发者 异构计算
浏览器刷新率是什么?
【5月更文挑战第29天】浏览器刷新率是什么?
125 1
|
Web App开发 前端开发 安全
一文带你详细了解浏览器安全
1.同源策略 浏览器的同源策略,限制了来自不同源的“document”或脚本,对当前“document”读取或设置某些属性。 为了不让浏览器的页面行为发生混乱,浏览器提出了“Origin”(源)这一概念,来自不同Origin的对象无法互相干扰。 对于JavaScript来说,以下情况被认为是同源与不同源的:
132 3
一文带你详细了解浏览器安全
|
JavaScript 前端开发
浏览器行为
浏览器行为
76 0
|
存储 Web App开发 缓存
浏览器相关总结
浏览器相关总结
|
Web App开发
浏览器突然好用多了。。。
我一向不掩饰对对浏览器插件的推崇。 首先,浏览器是日常工作中频繁接触的工具,借助浏览器这个平台,让插件触手可及,使用更加方便。 其次,插件普遍在几十KB或者上百KB,对比于动辄几十上百MB的桌面应用要轻量很多。
浏览器突然好用多了。。。
关于网页浏览器的一些实用小技巧
关于网页浏览器的一些实用小技巧
161 0
关于网页浏览器的一些实用小技巧
|
Web App开发 移动开发 测试技术
IE9是最佳浏览器?
据CNET科技资讯网11月10日国际报道,一开始只是个意外—一个专为宣传用的博客贴出了微软最新版的Internet Explorer 9 (IE9)。但不到一个星期内,错误的信息就马上传遍了整个软件市场。
1046 0