不要盲目的在項目中使用LESS CSS

　　此篇文章發佈於2011年，當時的想法與如今已有不一樣，不建議繼續閱讀。
　　若是你還不知道LESS CSS是什麼東西，能夠看一下這篇文章，是我一朋友寫給新人看的《CSS——LESS》
　　不能否認，LESS CSS是個強大的工具，它彌補了css沒有變量、沒法運算等一些「先天缺陷」，但它彷佛給我一種錯覺，就是爲了功能而實現功能。
　　好比它的引用功能

.rounded_corners{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#header{
    .rounded_corners;
}
#footer{
    .rounded_corners;
}

　　最終編譯後會生成以下代碼

.rounded_corners{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#header{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#footer{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

　　它彷佛彌補上了css的一個缺陷，但我並沒發現他這樣作的目的是什麼，我徹底能夠直接這樣一段

.rounded_corners{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

　　而後頁面哪須要圓角，直接加上class="rounded_corners"，固然，它的引用是能夠設置參數的，好比這樣

.margin10(@size:10px){
    margin:@size;
}
.test{
    .margin10;
}

　　彷佛很高級的樣子，參數能夠控制，減小了重複代碼的書寫，可是否實用呢？我拿以前項目裏的樣式比較了下，發現能拎出來，經過參數設置具體樣式的幾乎沒有，只有幾個css3的屬性用這個功能仍是比較OK，好比這段陰影樣式

.box-shadow(@arguments){
    -webkit-box-shadow:@arguments;
    -moz-box-shadow:@arguments;
    box-shadow:@arguments;
}

　　由於只要是陰影，就少不了這三句，相似的還有圓角、透明等，就不一一列舉了。
　　而後，說說最基本的變量吧，我就一直沒想通css要變量有什麼用

@w100:100px;
@h100:100px;
div{
    width:@w100;
    height:@h100;
}

　　可能會說，我定義好一個變量，在不一樣的地方均可以直接調用，若是要修改，只需修改一次。但問題是，萬一我只想改其中一個的樣式，另外一個別動，或者就是兩個同時都須要修改。
　　就好比我一個頁面裏有2塊廣告區域，原先寬高是同樣的，如今我要其中一個區域變大，另外一個變小，這樣我反而以爲定義變量增多了個人工做量。
　　可能又會說，LESS CSS不是支持四則運算嘛，對，咱們能夠這樣子

@w100:100px;
@h100:100px;
div{
    width:@w100 + 50px;
    height:@h100 - 50px;
}

　　甚至還能夠更2B青年一點

@w100:100px;
@h100:100px;
div{
    width:(@w100 + 50px) / 2 + 75px;
    height:@h100 - (100px / 2);
}

　　LESS CSS裏的計算功能就像變量同樣讓我沒法理解，別忘了，LESS CSS是要編譯過你寫的.less文件的，最終生成的仍是標準的css代碼。換句話說，就是你再怎麼定義變量，再怎麼計算，最終它生成的仍是一個固定的數值，幫咱們減小的只是計算這個數值的時間，但我以爲我花時間去寫個運算，還不如心算一下。
　　固然了，LESS CSS也並不是一無可取，它的嵌套功能就讓我眼前一亮

<div class="test">
    <div class="test1">
        <div></div>
    </div>
</div>

　　一般咱們要給上面這三個div寫樣式，無非用2種方法，一種就是定義class/id，一種就是給最外層定義個class/id，而後用繼承去寫。而LESS CSS給了咱們一種友好閱讀的方式

.test{
    .margin10;
    @color:#4d926f;
    width:@w100 + 100px;height:100px;border:1px solid red;background:@color;
    &:hover,&.selected{background-color:#FFF}
    /*嵌套*/
    .test1{width:@w100 - 50px;height:100px;background-color:red;font-size:20px;
        /*多重嵌套*/
        div{width:100%;height:50px;background-color:#9F0;}
    }
    .test1:hover{background-color:@color}
}

　　相信這樣的樣式要查找起來，都會比較輕鬆，哪一層套哪一層都一清二楚，這是我感受它很讚的功能。
　　總的來講，LESS CSS不是很適合用在項目中，它更適用於皮膚、模板等總體框架固定死的網站製做，好比論壇、空間。因此你們在使用LESS CSS請先考慮下這個工具是否適用，別盲目的使用，不但效率沒提升，還增長了沒必要要的工做量。
轉載於猿2048:▶《不要盲目的在項目中使用LESS CSS》