CSS预处器之Less

一、什么是CSS预处器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

1.注释

/**/在.css中可见；  //在.css中不可见

2.变量：@变量名：值(利用变量可以实现换肤等)

/*变量  @变量名：值*/
@baseColor:#e92322;
a {
  color: @baseColor;
}

//对应的.css代码
/*变量  @变量名：值*/
a {
  color: #e92322;
}

3.混入：可以将一个定义好的样式引入到另一个样式中，类似于函数调用

/*混入可以将一个定义好的样式引入到另一个样式中，类似于函数调用*/
.addRadius(@r:10px) {/*默认10px*/
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
div {
  width: 200px;
  height: 200px;
  .addRadius(5px);
}

//对应的.css代码
/*混入可以将一个定义好的样式引入到另一个样式中，类似于函数调用*/
div {
  width: 200px;
  height: 200px;
  /*默认10px*/
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

4.嵌套：实现选择器的继承，减少代码量，使代码结构更清晰

/*嵌套:实现选择器的继承，减少代码量，使代码结构更清晰*/
.jd_header {
  width: 100px;
  height: 100px;
  .addRadius();
  >div {
    &::before {
      content: "";
    }
    width: 100%;
    a {
      text-decoration: underline;
      &:hover {
        text-decoration:none;
      }
    }
    >h3 {
      width: 100%;
      height: 100%;
    }
    ul {
      list-style: none;
    }
  }
}

//对应的.css代码
/*嵌套:实现选择器的继承，减少代码量，使代码结构更清晰*/
.jd_header {
  width: 100px;
  height: 100px;
  /*默认10px*/
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
.jd_header > div {
  width: 100%;
}
.jd_header > div::before {
  content: "";
}
.jd_header > div a {
  text-decoration: underline;
}
.jd_header > div a:hover {
  text-decoration: none;
}
.jd_header > div > h3 {
  width: 100%;
  height: 100%;
}
.jd_header > div ul {
  list-style: none;
}

个人觉得less好上手，他的写法是顺着网页结构走的，练习几个小例子就知道怎么写了。