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