css进阶成预编译less语法规则

解决第一个问题，怎么能让代码中不出现重复项，比如一个主色，到处写？

1、变量

less中可以设置变量，然后引用使用

旧：

a{
color:#000
}
b{
color:#000
}
c{
color:#000
}

less:

@maincolor:#000;
a{
color:@maincolor
}
b{
color:@maincolor
}
c{
color:@maincolor
}

这样的话，只需要更改参数maincolor就可以实现主题色切换了，其实写代码的人基本上都不会像出现复制粘贴的情况，所以变量很有必要。

 

解决第二个问题，一个样式块重复调用，同样，作为一个写代码的，我是不允许你复制粘贴的，所以使用

2、混合模式

2.1，直接引入他！

如果有一个常用项，很多都要用比如：

.b{
border-bottom:1px solid #000
}

.a{
color:#888;
border-bottom:1px solid #000
}

.c{
color:#222;
border-bottom:1px solid #000
}

a、c都重复调用了b的样式，所以不要复制粘贴，就是这样

less

.b{
border-bottom:1px solid #000
}

.a{
color:#888;
.b
}

.c{
color:#222;
.b
}

额，是的就是这么简单，相当于把b当成了一个方法直接引入即可，是的我说的是方法，没说是变量，原因是什么的，就是他丫的还能传参数！！！

继续看！

如果a、c也是引用border-bottom，但是可能大家的某个参数不一样，比如颜色对吧，那b就不能用了，除非b里面的参数，让你自定义，好的，他来了，他来了！！

 

2.2 带参数的混合

.b(@color){
bottom-border:1px solid @color
}

.a{
color:#000;
.b(#656)
}

.c{
background-color:#999;
.b(#999)
}

看到了，b的样子是不是像极了方法。

既然他像方法了，那么你一定能想到

 

2.3 带默认值的混合

是的，方法的化，当然可以设置默认值啦

.b(@color:#456){
bottom-border:1px solid @color
}

.a{
color:#000;
.b()
}

.c{
background-color:#999;
.b(#999)
}

b里面有默认值，a里面可以不传，那就调用默认的，c里面同样可以上传你要的颜色

 

 

变量有了，方法有了，怎么会没有选择分支结构呢？来吧if else大法！

 

3、匹配模式

用法类似于if -else

比如，在写css的时候，会存在针对一个dom我写多个样式，比如，一个是只改颜色，一个是该背景色，一个是改边框

这样的话，只要给对应dom添加不用class就可以实现不同效果

css

.a1{
color:#000;
}
.a2{
background:#000;
}
.a3{
border:1px solid #000;
}

b{
a1
}

这样的话看起来不错了，b调用不同的a，但是我觉得还不够，因为a1、a2、a3都是b的可用样式，其实都是给b准备的，b只需要选择即可，是不是有点if  else的感觉了

less

.a1(top,@w:5px,@c:#000) {
  border-width: @w;
  border-color: @c;
}

.a1(bottom,@w:10px,@c:#fff) {
  border-width: @w;
  border-color: @c;
}
//这个A1比较特殊，@_代表不管你选择哪一个a1都会带上这个a1的样式
.a1(@_,@w:15px,@c:#777){
  border-width: @w;
  border-color: @c;
}
.a2{
  .a1(top,100px,#345);
}

这里面a2  传入不同的第一个参数，top、bottom 就可以调用不同的a1,if-else或switc-case附体了吧。

 

还有一个点就是@__这个就默认你选择谁都会调用，额使用场景你动下脑子吧。

 

4、嵌套结构

好了，上面两个其实都是让你少写重复样式，这样其实你就可以在写之前，把要用的样式否单独写出来，在针对每个dom去调用

 

但是，css还有一个恶魔的重复，就是层级递进

 

css

：

<div class="list">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>


<style>
.list{}
.list ul{}
.list ul li{}
.list ul li a{}
</style>

则会中如果结构比较深，这个重复写啊！

 

所以来看less的嵌套！

 

<div class="list">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>


<style>
.list{
   color:#000;
   ul{
     color:#999
     li{
       width:10px
       a{
          display:block
        }
     }
   }
 }
</style>

好啦！，你看到了，就是按照他的html结构写进去就可以了，代码量减少了好多的。

 

最后。less是不能直接用到html中的，建议使用koala 编译即可。