互联网资讯

联系我们

互联网资讯

当前位置:主页 > 互联网资讯 >

LESS 让css也支持变量,运算符,include,嵌套规则等等

发布时间:2018-09-11 编辑:admin

使用 1. 下载js: http://lesscss.googlecode.com/ 最新版本好像是 1.0.30 2. 使用less,css文件的后缀名需要改为.less。 3. 在html页面中加入下面代码 <!-- style.less文件就是样式表文件,并且style.less必须放在less-1.0.22.min.js文件前加载,原理后面介绍 --> <link rel="stylesheet/less" href="style.less" /> <script src="less-1.0.22.min.js"></script> 变量 变量可以让我们声明1个常量值,并在以后多处地方进行重复使用。 一般css写法: 复制代码代码如下: .class1{ color:#ccc; width:100px; } .class2{ color:#ccc; width:120px; } LESS写法: 复制代码代码如下: @color1: #ccc; .class1{ color:@color1; width:100px; } .class2{ color:@color1; width:120px; } inlucde 大家一定碰见过再某个规则中需要用的部分样式跟另外1个规则样式一样,但没办法,我们只能copy过来,或者为元素指定多个class。但用了LESS后,我们不再需要这么痛苦了。 一般css写法: 复制代码代码如下: .red{ color:red;border:1px solid red; } .class2{ width:100px;font-size:12px; /*下面的样式跟red的一样,copy过来的,修改就要修改2处*/ color:red;border:1px solid red; } LESS写法: 复制代码代码如下: .red{ color:red;border:1px solid red; } .class2{ width:100px;font-size:12px; /*直接inlcude .red的规则*/ .red } 嵌套规则:   一般css的写法: 复制代码代码如下: #header{color:red;}   #header .logo{backgroud-image:url(logo.gif);}   #header li{display:block;} LESS写法: 复制代码代码如下: #header{ color:red; .logo{ backgroud-image:url(logo.gif); } li{ display:block; } } 运算符:   LESS 写法: 复制代码代码如下: @fontSize 12px; .class1{ font-size : @fontSize + 2; } .class2{ font-size : @fontSize * 2; } 更多其它功能: 请见LESS官方网站:http://lesscss.org/ 原理分析:   LESS js版本的实现方式是使用ajax获取style.less文件,然后根据该文件的规则生成最终浏览器能理解的css插入到html代码中。所以就出现前面说过的<link rel="stylesheet/less" href="style.less" />必须在js前面。 总结:   LESS JS版本的实现原理,是每次请求都需要通过JS去动态生成原始的css,如果css比较大的话,对于客户端的性能影响比较大,所以个人觉的less的js版本实用性不强。   不知道LESS 的ruby版本的实现原理是怎么样的,我认为如果真的觉得less方式可以提高css的开发效率,到是可以参考它的代码实现一套java或net的源代码,在程序启动的时候一次根据.less文件生成所有的css文件,而不是每次请求都用js动态生成。 PS:刚刚无意间搜索,竟然找到1个net版本的less,大家可以看看这个版本怎么实现的:http://www.dotlesscss.com/ [作者]:BearRui(AK-47) [博客]: http://www.cnblogs.com/BearsTaR/

本文源自: AG环亚娱乐


Copyright © 2005-2016 http://www.paugme.com AG环亚娱乐_AG直营网_环亚娱乐AG最佳线路_网易体育版权所有 AG环亚娱乐_AG直营网_环亚娱乐AG最佳线路_网易体育