1.初识less

less作为一门CSS扩展语言，也就是说CSS预处理器。（Leaner Style Sheets）简称less，它只不过是为css新增这些的功能，比如说：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，根据按这样的话，那么less可以让我们写更少的代码做更多的事情。

less语法

1变量（variables）

普通的变量

变量的定义方式为@，可以赋给变量！

语法：@变量名：值。

// 1.普通的变量
@bgColor:white;
@Height:50px;
.contain{
    background-color: @bgColor;
 
}
.row{
    height:@Height;
    margin-left:@Height;
}   

编译后的css：

.contain {
  background-color: white;
}
.row {
  height: 50px;
  margin-left: 50px;
}

作为URL

使用时候，使用“ ”将变量的值扩起来，使用同样将变量以@{变量名}的方式使用；

语法：@变量：作路径；

less：

// 3.作为URL
@img-url:"../imgs/idnex";
img{
    background-image: url("@{img-url}/shouye.png");
}

编译后的css

img {
  background-image: url("../imgs/idnex/shouye.png");
}