LESS 让css也支持变量，运算符，include,嵌套规则等等
发布时间：2010-07-04 14:42:14 作者：佚名 
我要评论
我要评论最近在网上看到1个很有意思的CSS扩展，这里介绍给大家。LESS 最早是1个ruby的gem，用于扩展css的语法，用了LESS后，可以在css中使用变量，运算符，include,嵌套规则等等。现在LESS出了js版本，让我们一起来看看LESS能为我们带来什么吧?
使用
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/
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/
相关文章
这篇文章主要介绍了CSS实现多层嵌套结构最外层旋转其它层不旋转效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随2020-02-05纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
经常遇到要居中的问题，水平居中问题比较好解决，而垂直居中问题因为vertical-align经常失效，下面与大家分享下几个不错的解决方法2014-04-24- 除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站.2009-11-30
- 网页制作Webjx文章简介：简单学习css组合与CSS嵌套的写法. CSS组合 你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了2009-04-02
CSS 即将支持嵌套,SASS/LESS 等预处理器该何去何从
随着 CSS 自定义属性（CSS Variable）的大规模兼容，到如今 CSS 即将支持嵌套，一些预处理器的核心功能已经被 CSS 原生支持，这是否表示 SASS/LESS 等预处理器已无用武之地2021-08-10
最新评论