less

less :是一门css预处理语言

它需要一种编译语言去把它转换成css
1.使用@定义变量。

@width:100px;
div {
  width: @width;
  height: @width;
  background: blue;
}
p{
    width: @width;
    height: @width;
    background: red;
}

使用编译器后转换为css

div {
  width: 100px;
  height: 100px;
  background: blue;
}
p {
  width: 100px;
  height: 100px;
  background: red;
}

2.混合模式带参（可不带参）

.two(@w:100px,@h:100px,@b:red){
    width:@w; height: @h; background:@b;
}
div{
    .two()

}
p{
    .two()
}

使用编译器后转换为css

div {
  width: 100px;
  height: 100px;
  background: #ff0000;
}
p {
  width: 100px;
  height: 100px;
  background: #ff0000;
}

3.嵌套

.w_h(@w: 600px, @h: 800px, @b: #fff) {
    width: @w;
    height: @h;
    background: @b
}

.one {
    .w_h();
    margin: auto;

    ul {
        .w_h();

        li {
            .w_h(600px, 50px, pink);
            list-style-type: none;
            height: 50px;
            text-align: center;
            a{
                text-decoration: none;
                &:hover{color:blueviolet;}
            }
        }
    }
}

使用编译器后转换为css

.one {
  width: 600px;
  height: 800px;
  background: #ffffff;
  margin: auto;
}
.one ul {
  width: 600px;
  height: 800px;
  background: #ffffff;
}
.one ul li {
  width: 600px;
  background: #ffc0cb;
  list-style-type: none;
  height: 50px;
  text-align: center;
}
.one ul li a {
  text-decoration: none;
}
.one ul li a:hover {
  color: blueviolet;
}

4 @arguments 选取所有参数

.border(@w: 1px, @s: solid, @b: #333) {
    border: @arguments
}

使用编译器后转换为css

 border: 1px solid #333333;

5.@import 导入其他模块（.css, .html, .js ,.php…）

@import '2.less';

注意：less后缀可以省略