前端開發性能推薦-如何進行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規則集非常有幫助。