如何进行CSS代码减肥提升前端性能 - Go语言中文社区

如何进行CSS代码减肥提升前端性能


随着越来越多的CSS预处理器的普及,一些新的工具和应用程序,基本上使得网页设计师或开发人员的开发工作更轻松,像这样的工具:CSS2Less。今天就分享一些这个工具的使用,css2less 是一个用 Ruby 开发的小工具用来将 css 转成 Less CSS 格式的文件。

使用工具

这个工具可以让我们自己的CSS代码输入后给CSS代码减肥。所以让我给它一个尝试。有一个文件要转换,下面是CSS代码。

  1. nav {  
  2.     height40px;  
  3.     width100%;  
  4.     background#000;  
  5.     border-bottom2px solid #fff;  
  6. }  
  7. nav ul {  
  8.     padding0;  
  9.     margin0 auto;  
  10. }  
  11. nav li {  
  12.     displayinline;  
  13.     floatleft;  
  14. }  
  15. nav a {  
  16.     color#fff;  
  17.     display: inline-block;  
  18.     width100px;  
  19.     text-shadow1px 1px 0px #000;  
  20. }  
  21. nav li a {  
  22.     border-right1px solid #fff;  
  23.     box-sizing:border-box;  
  24. }  
  25. nav li:last-child a {  
  26.     border-right0;  
  27. }  
  28. nav a:hover, nav a:active {  
  29.     background-color#fff;  

下面是结果。

  1. nav a:hover, nav a:active {  
  2.     background-color#fff;  
  3. }  
  4. nav {  
  5.     height40px;  
  6.     width100%;  
  7.     background#000;  
  8.     border-bottom2px solid #fff;  
  9.     a {  
  10.         color#fff;  
  11.         display: inline-block;  
  12.         width100px;  
  13.         text-shadow1px 1px 0px #000;  
  14.     }  
  15.     ul {  
  16.         padding0;  
  17.         margin0 auto;  
  18.     }  
  19.     li:last-child {  
  20.         a {  
  21.             border-right0;  
  22.         }  
  23.     }  
  24.     li {  
  25.         displayinline;  
  26.         floatleft;  
  27.         a {  
  28.             border-right1px solid #fff;  
  29.             box-sizing:border-box;  
  30.         }  
  31.     }  

正如我们可以在上面看到的那样,我们的老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

版权声明:本文来源51CTO,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:http://developer.51cto.com/art/201210/360462.htm
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-05-15 22:53:45
  • 阅读 ( 675 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢