html5中文学习网

您的位置: 首页?>?网页制作?>?css365可以把体育投注转到娱乐场吗_365体育网址全场高呼_365体育投注开户 ? 正文

浏览器端如何使用Less_CSS365可以把体育投注转到娱乐场吗_365体育网址全场高呼_365体育投注开户_CSS_网页制作

[ ] 已经帮助:人解决问题
这篇文章主要介绍了浏览器端如何使用Less,需要的朋友可以参考下

 之前项目用过Less,现在负责的项目也要使用,所以就总结下Less,也方便以后查看。本文主要是讲浏览器端如何使用Less。sErHTML5中文学习网 - HTML5先行者学习网

简介:sErHTML5中文学习网 - HTML5先行者学习网
  LESS是一种由Alexis Sellier设计的动态层叠样式表语言。LESS 是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被替换为JavaScript。受益于JavaScript,LESS可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino)。sErHTML5中文学习网 - HTML5先行者学习网

????? 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。你也可以再less文件中写按照css规则写样式。sErHTML5中文学习网 - HTML5先行者学习网

意义:sErHTML5中文学习网 - HTML5先行者学习网
??? 改变传统样式的编写方式,以面向对象的方式编写,提高开发效率。sErHTML5中文学习网 - HTML5先行者学习网

引入LESS:  sErHTML5中文学习网 - HTML5先行者学习网
  首先,引入rel属性的值是stylesheet/less的.less样式表。如下:sErHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网

在渲染HTML页面时,less文件需要编译成css文件。我们可以有很多种方法。在服务器端,如Node.js,我们有专门的less编译模块。如果是在客户端,需要从LESS官网下载less.js文件,然后在HTML页面中引入,如下:sErHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网

有了less编译工具,我们就可以渲染页面了。sErHTML5中文学习网 - HTML5先行者学习网

  在浏览器中使用less.js开发是很好的,但不推荐用于生产环境中。浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中,尤其是对性能要求比较高的场合,建议使用node或者其它第三方工具先编译成CSS再上线使用。sErHTML5中文学习网 - HTML5先行者学习网

注意:sErHTML5中文学习网 - HTML5先行者学习网

确保包涵.less样式表在less.js脚本之前sErHTML5中文学习网 - HTML5先行者学习网
当你引入多个.less样式表时,它们都是独立编译的。所以,在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。sErHTML5中文学习网 - HTML5先行者学习网
必须通过服务器环境访问页面,否则报错sErHTML5中文学习网 - HTML5先行者学习网
浏览器选项:sErHTML5中文学习网 - HTML5先行者学习网
  你可以引入之前通过创建一个全局less对象的方式来指定参数,例如:sErHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网

但是这影响所有初始链接标记。你也可以在指定的脚本标签的增加选项,如下:sErHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网

或者,你也可以在链接配置参数覆盖某些选项,如下:sErHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网

注意:sErHTML5中文学习网 - HTML5先行者学习网

以上三种配置参数的优先级为:link标签的>script标签>全局对象sErHTML5中文学习网 - HTML5先行者学习网
对象属性名称不驼峰sErHTML5中文学习网 - HTML5先行者学习网
link标签的配置只和时间选项有关,其他不起作用sErHTML5中文学习网 - HTML5先行者学习网
观察模式:sErHTML5中文学习网 - HTML5先行者学习网
  如果使用观察模式,则配置参数的env为development。然后在Less.js文件加载之后调用less.watch(),如下:sErHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网

?注意:sErHTML5中文学习网 - HTML5先行者学习网

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

?完整demo:sErHTML5中文学习网 - HTML5先行者学习网
  reset.less是重置浏览器默认样式,config.js是浏览器选项的配置参数,如下:sErHTML5中文学习网 - HTML5先行者学习网

config.jssErHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
sErHTML5中文学习网 - HTML5先行者学习网
less = {sErHTML5中文学习网 - HTML5先行者学习网
env: "development", // or "production"sErHTML5中文学习网 - HTML5先行者学习网
async: false, // load imports asyncsErHTML5中文学习网 - HTML5先行者学习网
fileAsync: false, // load imports async when in a page undersErHTML5中文学习网 - HTML5先行者学习网
// a file protocolsErHTML5中文学习网 - HTML5先行者学习网
poll: 1000, // when in watch mode, time in ms between pollssErHTML5中文学习网 - HTML5先行者学习网
functions: {}, // user functions, keyed by namesErHTML5中文学习网 - HTML5先行者学习网
dumpLineNumbers: "all", // "comment" or "mediaQuery" or "all"sErHTML5中文学习网 - HTML5先行者学习网
relativeUrls: false,// whether to adjust url's to be relativesErHTML5中文学习网 - HTML5先行者学习网
// if false, url's are already relative to thesErHTML5中文学习网 - HTML5先行者学习网
// entry less filesErHTML5中文学习网 - HTML5先行者学习网
rootpath: ":/"// a path to add on to the start of every urlsErHTML5中文学习网 - HTML5先行者学习网
//resourcesErHTML5中文学习网 - HTML5先行者学习网
};sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网

index.htmlsErHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网

参数详解:sErHTML5中文学习网 - HTML5先行者学习网
async
sErHTML5中文学习网 - HTML5先行者学习网

Type: BooleansErHTML5中文学习网 - HTML5先行者学习网
Default: falsesErHTML5中文学习网 - HTML5先行者学习网
是否异步加载重要文件sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
dumpLineNumberssErHTML5中文学习网 - HTML5先行者学习网

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

Type: StringsErHTML5中文学习网 - HTML5先行者学习网
Options: development or productionsErHTML5中文学习网 - HTML5先行者学习网
Default: depends on page URLsErHTML5中文学习网 - HTML5先行者学习网
运行环境,如果是production,你的css文件将被缓存到本地并且信息不会输出到控制台。如果url以file://开头或者在你本地或者没有标准的端口,这都将被认为是development模式。sErHTML5中文学习网 - HTML5先行者学习网
例如:sErHTML5中文学习网 - HTML5先行者学习网
less = { env: 'production' };sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
errorReportingsErHTML5中文学习网 - HTML5先行者学习网

Type: StringsErHTML5中文学习网 - HTML5先行者学习网
Options: html|console|functionsErHTML5中文学习网 - HTML5先行者学习网
Default: htmlsErHTML5中文学习网 - HTML5先行者学习网
设置编译失败时错误报告的方法。sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
fileAsync
sErHTML5中文学习网 - HTML5先行者学习网

Type: BooleansErHTML5中文学习网 - HTML5先行者学习网
Default: falsesErHTML5中文学习网 - HTML5先行者学习网
当以file协议访问页面,是否异步引入文件sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
functionssErHTML5中文学习网 - HTML5先行者学习网

Type: objectsErHTML5中文学习网 - HTML5先行者学习网
用户自定义函数sErHTML5中文学习网 - HTML5先行者学习网
e.g.sErHTML5中文学习网 - HTML5先行者学习网
less = {sErHTML5中文学习网 - HTML5先行者学习网
functions: {sErHTML5中文学习网 - HTML5先行者学习网
myfunc: function() {sErHTML5中文学习网 - HTML5先行者学习网
return new(less.tree.Dimension)(1);sErHTML5中文学习网 - HTML5先行者学习网
}sErHTML5中文学习网 - HTML5先行者学习网
}sErHTML5中文学习网 - HTML5先行者学习网
};sErHTML5中文学习网 - HTML5先行者学习网
可以像Less函数一样使用它。sErHTML5中文学习网 - HTML5先行者学习网
.my-class {sErHTML5中文学习网 - HTML5先行者学习网
border-width: unit(myfunc(), px);sErHTML5中文学习网 - HTML5先行者学习网
}sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
logLevelsErHTML5中文学习网 - HTML5先行者学习网

Type: NumbersErHTML5中文学习网 - HTML5先行者学习网
Default: 2sErHTML5中文学习网 - HTML5先行者学习网
在控制台输出日志的数量。如果是production环境,将不会输出任何信息。sErHTML5中文学习网 - HTML5先行者学习网
2 - Information and errors1 - Errors0 - NothingsErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
pollsErHTML5中文学习网 - HTML5先行者学习网

Type: IntegersErHTML5中文学习网 - HTML5先行者学习网
Default: 1000sErHTML5中文学习网 - HTML5先行者学习网
在观察模式下,测试的时间。sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
relativeUrlssErHTML5中文学习网 - HTML5先行者学习网

Type: BooleansErHTML5中文学习网 - HTML5先行者学习网
Default: falsesErHTML5中文学习网 - HTML5先行者学习网
使用相对路劲。如果设置FALSE,则url是相对根目录文件。sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
globalVarssErHTML5中文学习网 - HTML5先行者学习网

Type: ObjectsErHTML5中文学习网 - HTML5先行者学习网
Default: undefinedsErHTML5中文学习网 - HTML5先行者学习网
全局变量列表注入代码。“字符串”类型的变量必须显式地包含引号。sErHTML5中文学习网 - HTML5先行者学习网
less.globalVars = { myvar: "#ddffee", mystr: "/"quoted/"" };sErHTML5中文学习网 - HTML5先行者学习网
这个选项定义了一个可以被文件引用的变量。这个变量也可以在文件中重新定义。sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
modifyVarssErHTML5中文学习网 - HTML5先行者学习网

Type: ObjectsErHTML5中文学习网 - HTML5先行者学习网
Default: undefinedsErHTML5中文学习网 - HTML5先行者学习网
Same format as globalVars.sErHTML5中文学习网 - HTML5先行者学习网
与 globalVars参数含义相反,它将会在你文件最后定义,这意味着它将重写你在文件定义的。sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
rootpathsErHTML5中文学习网 - HTML5先行者学习网

Type: StringsErHTML5中文学习网 - HTML5先行者学习网
Default: falsesErHTML5中文学习网 - HTML5先行者学习网
设置根目录,所有的Less文件都会以这个目录开始。sErHTML5中文学习网 - HTML5先行者学习网
sErHTML5中文学习网 - HTML5先行者学习网
useFileCachesErHTML5中文学习网 - HTML5先行者学习网

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

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助