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的前缀,可以直接写一个属性代替一堆属性,简洁了不少。
本人水平有限,更多体检不定期更新中