欢迎访问 licqi IT技术
我们一直在努力

如何进行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规则集非常有帮助。

原文链接:http://www.cnblogs.com/58top/archive/2012/10/13/css-to-less.html

赞(0) 打赏
未经允许不得转载:licqi IT技术 » 如何进行CSS代码减肥提升前端性能
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏