less语法

less的基本语法和css一样，但增加了很多css没有的语法，比如定义变量、混合、嵌套、运算、注释、导入。

1. 变量
   less中定义变量需要加“@”，如@mywidth:100px;

@mywidth:100px;
@mycolor:hotpink;
.box{
     width:@mywidth+50;
     color:@mycolor;
}

2. 混合
   可以在一端css代码里通过类名插入另一端css代码。

.mysize{
   width: 200px;
   height: 200px;
}
.box{
   .mysize();
   background-color: hotpink;
}

3. 嵌套
   将后代选择器或者叫做层级选择器写在一个大括号中，方便定义和阅读。

.mytitle{
   width: 300px;
   height: 300px;
   a{
       float: right;
       &:hover{
           color: aquamarine;
       }
   }
}

4. 运算
   在定义值的时候可以使用 ＋ - × ÷ 进行运算。

@mywidth:1/20rem;
.box02{
   width: (200/2*@mywidth)-2;//width是3rem
}

5. 注释
   less语法中有单行注释和多行注释。

 // 定义单行注释
/*
    定义
    多行注释
*/

6. 导入
   less文件中可以导入其他的less文件。

@import "main"; //main.less