前端開發效能推薦-如何進行CSS代碼減肥

來源:互聯網
上載者:User

隨著越來越多的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規則集非常有協助。

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。