• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 浏览器端如何使用Less

浏览器端如何使用Less

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含浏览器端,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样式表。如下:


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


有了less编译工具,我们就可以渲染页面了。

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

注意:

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


但是这影响所有初始链接标记。你也可以在指定的脚本标签的增加选项,如下:


或者,你也可以在链接配置参数覆盖某些选项,如下:


注意:

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


 注意:

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

 完整demo:
  reset.less是重置浏览器默认样式,config.js是浏览器选项的配置参数,如下:

config.js


index.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 = {

您可能想查找下面的文章:

  • 浏览器端如何使用Less

相关文章

  • 2017-08-06CSS背景图坐标定位详解及负数的使用技巧
  • 2017-08-06多class应用同一个元素时前后声明的class规则将会怎样
  • 2017-08-06解析CSS编写中的属性优先级问题
  • 2017-08-06LESSCSS让CSS使用起来更加灵活成就CSS动态化
  • 2017-08-06Css3新特性应用之形状总结
  • 2017-08-06有利于SEO的DIV+CSS的命名规则小结
  • 2017-08-06使用css属性:nth-child(n)匹配选择第n个子元素
  • 2017-08-06CSS 多浏览器兼容性问题及解决方案
  • 2017-08-06css实现点击滚动翻页的效果(无js)
  • 2017-08-06网页设计中常用的度量单位的介绍与比较

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
    • CSS中的expresssion的使用及注意事项
    • 编写CSS的一些感悟分享
    • 自适应屏幕的CSS响应式布局设计技巧总结
    • 浅谈firefox 的event事件处理
    • css 浮动 理解Float的含义
    • W3标准不变 清除浮动实现代码
    • CSS a:hover伪类在IE6下的问题
    • 使用CSS代码的空格实现中文对齐的方法
    • CSS 网页文字渐变效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有