可编程化虽然让学习曲线增大，但是却对日常使用带来巨大的便利，十分提倡！

引入概念

1.什么是css预编译？

2.什么是css预编译器？

我们通过自定义写了一大堆除了我们自己，浏览器根本不认识的东西，怎么用啊？于是，css预编译器诞生啦，将你写的谁也看不懂的东西再发布之前自动编译成真正的css，这样你方便了，浏览器能看懂了，皆大欢喜！

3.什么是css后编译？

使用方法

1.变量化

解释：允许定义css变量，然后在需要这个变量的地方引用。

• less:

@beautiful-color: blue;

.a{
    color: @beautiful-color;
    margin : 0;
}

• css:

.a {
  color: blue;
  margin: 0;
}

2.混合化

解释：在样式A中引入样式B，样式B中的css样式就会自动复制到样式A中。

• less:

.header{
    border: 1px solid red;
    .a;
}

• css:

.header {
  border: 1px solid red;
  color: blue;
  margin: 0;
}

or

• less:

.box-radius(@my-radius:5px){
    border-radius: @my-radius;
    -webkit-border-radius: @my-radius;
    -moz-border-radius: @my-radius;
}

#header{
    .box-radius;
}
#header1{
    .box-radius(4px);
}

• css:

#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#header1 {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

3.嵌套化

解释：子元素，直接子元素等可以层层嵌在其中。

• less:

.b{
    color: @beautiful-color;
    .c{
        margin-top: 10px;
    }
    .d >p {
        margin-bottom: 10px;
        .e{
            color:@beautiful-color*3;
            &:before{
                color: @beautiful-color;
            }
            > li{
                display: inline;
            }
        }
    }
    &:after{
        content: ' ';
        clear: both;
        display: block;
    }
}

• css:

.b {
  color: blue;
}
.b .c {
  margin-top: 10px;
}
.b .d > p {
  margin-bottom: 10px;
}
.b .d > p .e {
  color: #0000ff;
}
.b .d > p .e:before {
  color: blue;
}
.b .d > p .e > li {
  display: inline;
}
.b:after {
  content: ' ';
  clear: both;
  display: block;
}

4.运算

解释：css允许进行运算

• less:

.f{
    color:@beautiful-color*3
}

• css:

.f {
  color: #0000ff;
}

the end