上次写的一点居然忘了保存了,虽然说编辑器有自动保存的功能,但是昨天写的依然找不到了,/(ㄒ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; }
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