隨著越來(lái)越多的CSS預(yù)處理器的普及，一些新的工具和應(yīng)用程序，基本上使得網(wǎng)頁(yè)設(shè)計(jì)師或開發(fā)人員的開發(fā)工作更輕松，像這樣的工具：CSS2Less。今天就分享一些這個(gè)工具的使用，css2less 是一個(gè)用 Ruby 開發(fā)的小工具用來(lái)將 css 轉(zhuǎn)成 Less CSS 格式的文件。

使用工具

這個(gè)工具可以讓我們自己的CSS代碼輸入后給CSS代碼減肥。所以讓我給它一個(gè)嘗試。有一個(gè)文件要轉(zhuǎn)換，下面是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;  
} 

下面是結(jié)果。

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代碼被大量的減肥，剩下簡(jiǎn)寫的方式了，這樣的好處是減少服務(wù)器端的壓力。

局限性

但是，我們也可以看到一些限制，轉(zhuǎn)換結(jié)果。在舊的CSS，我們有幾個(gè)相同的代碼，2個(gè)關(guān)于邊框的聲明border-bottom: 2px solid #fff;和border-right: 1px solid #fff;我們只需要手動(dòng)做其他的可能，直到解決上述限制。盡管目前仍然有限制，這個(gè)工具可以節(jié)省我們的時(shí)間，嵌套CSS規(guī)則集非常有幫助。

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