CSS代码减肥
随着越来越多的 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 ;
}
下面是结果。
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 ;
}
}
}
正如我们可以在上面看到的那样，我们的老CSS代码被大量的减肥，剩下简写的方式了，这样的好处是减少服务器端的压力，
局限性
但是，我们也可以看到一些限制，转换结果。 在旧的CSS，我们有几个相同的代码，2个关于边框的声明 border-bottom: 2px solid #fff; 和 border-right: 1px solid #fff; 我们只需要手动做其他的可能，直到 解决 上述限制 。尽管目前仍然有限制，这个工具可以节省我们的时间，嵌套CSS规则集非常有帮助。
推荐阅读 99个精美的免费登录注册界面PSD设计 Web开发人员有用的代码比较工具 25个强大的CSS代码，据说这些是开发者经常遇到比较棘手的代码 10个方便的在线CSS代码生成器,网页设计师必备！ jquery视差推荐：nikebetterworld视差平滑滚动效果
作者： 58分享
出处： "http://HdhCmsTestcnblogs测试数据/58top/
欢迎任何形式的转载
分享到： 腾讯微博 新浪微博 搜狐微博 QQ空间 更多 0
分类: 兼容性/css
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息