浏览器端如何使用Less

所属分类: 网页制作 / CSS 阅读数: 1463
收藏 0 赞 0 分享

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

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多