css預加載之less

　　 css預加載，以前聽過不少，可是一直都沒有抽出實現好好了解一下，恩，最近有稍微看了一下，感受仍是很強大的！！

 　　好吧，小弟的點點demo：http://files.cnblogs.com/yansi/less.rar

　　壓縮吧內容：1.less的js文件

　　　　　　　　2.less的文件

　　　　　　　　3.html文件

　　　　　　　　4.less編譯成的css文件

　　具體的寫法和注意事項就不一一贅述了，直接在http://www.lesscss.net/上面就能夠看到

 

　　/*******************************2013.8.29更新***********************************/

　　今天又把less拿起來看了看，由於有模塊化css的這麼個想法（可是還不知道怎麼破）。恩，暫時感受less用途仍是沒有達到想象中的方便（雖然感受會被各位看官吐槽，但我仍是要說，編輯器沒有智能提示有點不習慣，好吧我知道這只是小事）。

　　不過，值得一讚的是less的嵌套的寫法

ul li a {
    .news & {
        width:150px;
        display:inline-block;
        *display:inline;
        *zoom:1;
    }
    .talking & {
        display:block;
        width:200px;
    }
    .notice & {
        display:block;
        width:170px;
    }
    .news &:hover, .talking &:hover {
        text-decoration:none;
    }
}

View Code

這是less的寫法，編譯成的css爲：

 .news a, .talking a, .notice a {
    color: #0770FF;
}
.news ul li a, .talking ul li a, .notice ul li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 200%;
    text-decoration: underline;
}
.news ul li a {
    width: 150px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.talking ul li a {
    display: block;
    width: 200px;
}
.notice ul li a {
    display: block;
    width: 170px;
}
.news ul li a:hover, .talking ul li a:hover {
    text-decoration: none;
}

View Code

說實話，less並無減小多少css代碼量，可是改成less寫法以後，卻是更「結構化了」，當咱們須要在less裏面改css的時候，會看到有點相似dom結構的縮進，能夠很清晰的看到某個css樣式是用在那樣的周圍環境下，改動的時候不會忘記要再和父級檢驗一遍。怎麼說呢，就是「看起來更美觀了」吧。

　　另一點就是less能夠定義變量和函數（注意只能定義不能更改的），這樣的話卻是方便了不少css3的前綴，能夠直接寫一個屬性代替一堆屬性，簡潔了很多。

　　本人水平有限，更多體檢不按期更新中