上次写的一点居然忘了保存了,虽然说编辑器有自动保存的功能,但是昨天写的依然找不到了,/(ㄒoㄒ)/~~那好吧,重新开始写。
1.上篇写到了Mixins(混入),如果你仔细看了上面的例子,你就会发现其实有一种嵌套用法我们一直在用,却没有明确的表现出来。先看下面的Html代码
1 <div id="home"> 2 <div id="top">top</div> 3 <div id="center"> 4 <div id="left">left</div> 5 <div id="right">right</div> 6 </div> 7 </div>
上面的层级关系相信不用我多说,大家一看就能明白。如果这时让我们写Css是不是要#home{……}、#home #top{……}、#home #center #left{……},这样一个一个的嵌套,如果少写了几个就会造成书写的权重不够,从而导致以后的更改,或者是自己的校验造成很大的麻烦。所以就有必要看看Less是怎么干的了。
1 #home { 2 color: blue; 3 width: 600px; 4 height: 500px; 5 border: outset; 6 #top { 7 border: outset; 8 width: 90%; 9 } 10 #center { 11 border: outset; 12 height: 300px; 13 width: 90%; 14 #left { 15 border: outset; 16 float: left; 17 width: 40%; 18 } 19 #right { 20 border: outset; 21 float: left; 22 width: 40%; 23 } 24 } 25 }
发现这里写样式就和Html一样,嵌套关系非常的明显。父子关系清晰,权重问题不用担心,最小的辈分权重最大,可以看看编译之后的效果:
1 #home { 2 color: blue; 3 width: 600px; 4 height: 500px; 5 border: outset; 6 } 7 8 #home #top { 9 border: outset; 10 width: 90%; 11 } 12 13 #home #center { 14 border: outset; 15 height: 300px; 16 width: 90%; 17 } 18 19 #home #center #left { 20 border: outset; 21 float: left; 22 width: 40%; 23 } 24 25 #home #center #right { 26 border: outset; 27 float: left; 28 width: 40%; 29 }
编译之后就会发现,其实跟我们自己写的是一样的。他会把每个标签都写上,这样就不会担心权重的问题。
既然有了嵌套,就不得不提到“&”,直接看下面的例子:
1 a { 2 color: red; 3 text-decoration: none; 4 &:hover { // 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素 6 color: black; 7 text-decoration: underline; 8 } 9 }
然后是编译之后的效果:
1 a { 2 color: red; 3 text-decoration: none; 4 } 5 a:hover { 6 color: black; 7 text-decoration: underline; 8 }
2.既然说Less特别像JS,最少是不是能进行加减运算呢,其实还真能,但是怎么加减乘除运算呢,难道一个padding:5px+padding:5px=10px???当然不是了,请看下面的例子:
1 @init: #111111; 2 @transition: @init*2; 3 .switchColor { 4 color: @transition; 5 }
在代码中定义了两个变量,第一个变量是@init,他代表着一个颜色#111111;然后@teansition是@init*2;其实我也蒙了,这是什么呢?请看编译完成之后的效果:
1 .switchColor { color: #222222; } 其实就是进行了简单的乘法,我们知道白色就是#FFFFFF,要是#AAAAAA*2呢?结果会是什么呢?首先看一下Less:
1 @init:#AAAAAA; 2 @init2:@init*2; 3 .color{ 4 color: @init2; 5 }
编译之后的Css文件: 1 .color { color: #ffffff; }//也就是说最大就是#FFFFFF,不能超出这个范围了。
到这里基本上Less的常用方法就是这些了。还有关于颜色的一些用法,因为我不是很常用,就不在这里一一赘述了。有兴趣的朋友可以去看Less的官网。 http://lesscss.org/#-color-functions
最后能给大家一个非常使用的小工具,考拉,非常的方便的一个LESS编译小工具,关键是还有中文。http://pan.baidu.com/s/1jH95hBK