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的前缀，能够直接写一个属性代替一堆属性，简洁了很多。

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