LESS使用简介
来源:互联网 发布:c语言调用exe文件 编辑:程序博客网 时间:2024/05/22 16:01
转载:http://www.jsann.com/post/less_introduction.html
一直以来,都是使用JS扩展的比较多还没有使用过CSS的扩展,最近看到一个CSS的扩展叫做LESS;LESS最早是1个ruby的gem,用于扩展css的语法,前段时间出来了一个JS版的,看看先。
使用方法:
1. 下载js: http://lesscss.googlecode.com/ 现在最新版本好像是 1.0.33
2. 使用less,css文件的后缀名需要改为.less。
3. 在html页面中加入下面代码
<!-- LESS.less文件就是样式表文件,并且LESS.less必须放在less-1.0.33.min.js文件前加载并且Type一定要是text/less,切记是一定! -->
<link type="text/less" rel="stylesheet/less" rev="stylesheet/less" href="LESS.less" />
<script language="javascript" type="text/javascript" src="less-1.0.33.min.js"></script>
值得注意的是link的type属性必须要是text/less,之前用习惯了text/css结果死活就是没有效果。切记切记。
HTML的基本代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>LESS CSS</title>
- <!-- LESS.less文件就是样式表文件,并且LESS.less必须放在less-1.0.33.min.js文件前加载并且Type一定要是text/less,切记是一定! -->
- <link type="text/less" rel="stylesheet/less" rev="stylesheet/less" href="LESS.less" />
- <script language="javascript" type="text/javascript" src="less-1.0.33.min.js"></script>
- </head>
- <body>
- <div class="div1">TEST1...</div>
- <div class="div2">TEST2...</div>
- <div class="div3">TEST3...</div>
- <div class="div4">
- <div>
- <span>SPAN</span>
- </div>
- <span>SPAN</span>
- </div>
- <div class="div5">TEST5...</div>
- <div class="div6">TEST6...</div>
- </body>
- </html>
后面的样式都是在那个LESS.less文件中所定义。
1.定义变量
- @colors:#333;
- .div1
- {
- color:@colors;
- font-weight:bold;
- background-color:#CCC;
- }
这样就可以实现:当需要修改颜色的时候只需要修改一处即可。
2.样式内嵌
- .div3
- {
- border:#222 solid 1px;
- .div1
- }
这样可以直接嵌入.div1的样式而无须复制代码了。
3.嵌套规则
- @fonts:12px;
- .div4
- {
- border:#333 solid 1px;
- padding:10px;
- div
- {
- background-color:red;
- span
- {
- color:red;
- }
- }
- span
- {
- background-color:@colors;
- font-size:@fonts * 2;
- }
- }
这样可以使样式的名称更为的简短,并且修改的时候好找一些,因为都在一块嘛。
4.样式运算
代码见嵌套规则代码中的最后一个span标签的font-size属性。
好处类似于定义变量的好处。
5.样式传参
- .div5(@widths:5px)
- {
- color:red;
- border-style:solid;
- border-color:@colors;
- border-width:@widths;
- }
- .div6
- {
- .div5(10px);
- }
这个的好处就不言而喻了吧?个人最喜欢这个的啦。类似于编程语言中的函数定义、调用、传参。呵呵,很是惬意咧…(如需DEMO,请狂点此处。不知道为什么,LESS.less这个文件明明是存在的,服务器上就是找不到[报的404错误],可能是服务器阻止解析less结尾的文件吧。不过没关系,我已经将它打包好了,需要的话,大家可以将其下载自行使用IIS浏览,DEMO在此。)
LESS官方网站:http://lesscss.org/
LESS原理:
LESS js版本的是使用ajax获取LESS.less文件,然后根据该文件中所定义的规则生成最终浏览器能理解的css,然后再将其插入到html代码中。所以就出现前面说过的<link rel="stylesheet/less" href="LESS.less" />必须在js前面。
PS:可能是因为安全限制的原因,IE和Chrome无法查看到LESS的效果的(报的是HTTP404错误),必要的话,大家可以用IIS或者是FireFox、Opera、Safari来浏览。
基于LESS JS版本的实现原理,是每次请求都需要通过JS去动态生成原始的css,那么如果css比较大的话,对于客户端的性能影响比较大,所以个人觉的LESS的js版本实用性不强。
- LESS使用简介
- Less简介
- Less简介
- LESS 简介
- Less 简介
- less简介
- LESS简介
- Less简介
- less简介
- Less简介
- 使用Less
- linux less命令简介
- Linux less 简介
- linux less命令简介
- linux less命令简介
- LESS CSS 框架简介
- LESS CSS 框架简介
- LESS CSS 框架简介
- 工作流 业务流程/流程定义
- ios--------------Quartz 2D 绘图
- 浅谈JAVA中的日志文件
- struct和typedef struct彻底明白了
- 巴斯卡三角
- LESS使用简介
- java的war、jar、ear包的作用分别是什么?及eclipse打包war文件方法
- 《pigcms v6.2最新完美至尊版无任何限制,小猪微信源码多用户微信营销服务平台系统》
- 怎么把PPT幻灯片格式转换成为PDF
- Qt下加载图片,在图片上绘制多边形,移动鼠标拉伸多边形
- 缓存相关知识点(动态内容缓存)
- KNN算法
- 重要:Java中Excel上传
- 5个JVM命令行标志,值得你知道