随着越来越多的CSS预处理器的普及，一些新的工具和应用程序，基本上使得网页设计师或开发人员的开发工作更轻松，像这样的工具：CSS2Less。今天就分享一些这个工具的使用，css2less 是一个用 Ruby 开发的小工具用来将 css 转成 Less CSS 格式的文件。
使用工具
这个工具可以让我们自己的CSS代码输入后给CSS代码减肥。所以让我给它一个尝试。有一个文件要转换，下面是CSS代码。
nav {
height: 40px;
width: 100%;
background: #000;
border-bottom: 2px solid #fff;
}
nav ul {
padding: 0;
margin: 0 auto;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-shadow: 1px 1px 0px #000;
}
nav li a {
border-right: 1px solid #fff;
box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #fff;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
下面是结果。
nav a:hover, nav a:active {
background-color: #fff;
}
nav {
height: 40px;
width: 100%;
background: #000;
border-bottom: 2px solid #fff;
a {
color: #fff;
display: inline-block;
width: 100px;
text-shadow: 1px 1px 0px #000;
}
ul {
padding: 0;
margin: 0 auto;
}
li:last-child {
a {
border-right: 0;
}
}
li {
display: inline;
float: left;
a {
border-right: 1px solid #fff;
box-sizing:border-box;
}
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
正如我们可以在上面看到的那样，我们的老CSS代码被大量的减肥，剩下简写的方式了，这样的好处是减少服务器端的压力。
局限性
但是，我们也可以看到一些限制，转换结果。在旧的CSS，我们有几个相同的代码，2个关于边框的声明border-bottom: 2px solid #fff;和border-right: 1px solid #fff;我们只需要手动做其他的可能，直到解决上述限制。尽管目前仍然有限制，这个工具可以节省我们的时间，嵌套CSS规则集非常有帮助。
原文链接：http://www.cnblogs.com/58top/archive/2012/10/13/css-to-less.html
