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;
    }
}

这是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;
}

说实话，less并没有减少多少css代码量，但是改为less写法之后，倒是更“结构化了”，当我们需要在less里面改css的时候，会看到有点类似dom结构的缩进，可以很清晰的看到某个css样式是用在那样的周围环境下，改动的时候不会忘记要再和父级检验一遍。怎么说呢，就是“看起来更美观了”吧。

　　另外一点就是less可以定义变量和函数（注意只能定义不能更改的），这样的话倒是方便了很多css3的前缀，可以直接写一个属性代替一堆属性，简洁了不少。

　　本人水平有限，更多体检不定期更新中