less 编译

学习内容 less语法
1、注释
//注释 这个注释是css解析不出来的
2、变量
@aa:10;
@bb:1px solid red;
@cc:blue;
3、嵌套

.box{
      color:@cc;
      border:@bb;
}
/*调用函数的用法*/
.box2{
      height:20px;
      .box();//相当于调用函数 上面的.box
      .box;//相当于调用函数加不加括号都可以 相当于上面的.box
}

传参的用法1

.box(@dd){
    color:@cc;
    border:@bb;
    width:@dd;
}
.box2{
    height:20px;
    .box(20px);/*传值进去.box(@dd)*/
}

传参的用法2

.box(@dd:2px){
    color:@cc;
    border:@bb;
    width:@dd;
}
.box2{
    height:20px;
    .box();/*调用函数.box()不传参 使用函数默认参数值@dd:2px*/
}
.box2{
    height:20px;
    .box(6px);/*调用函数.box()传值使用传递过去的值6px*/
}

调用函数注意事项

.div{
    color:@cc;
}
p{
    div;//只有标签名字不能当函数来调用
}

*****
div{
    color:@cc;
}
p{
    div;//报错 不能以标签名当函数  只能用类名或者id名当函数
}

4、混入（最常用）
以前写法

.layout{}
.layout div{}
.layout div a{}

现在写法

.layout{
    >div{
        color:red;
          a{
                text-align:center;
                img{
                      width:20px;
                      &表示当前的img 在谁里面写表示当前的谁
                      &:hover {
                        width:60px;
                      }
                }  
                //&表示当前的a
                &:hover img{
                      width:40px;    
                }
            }
        }
    }

5、导入（补充）
@import "./b.less";找到b.less文件的路径
就可以把b.less的文件导入到当前的less文件内
就可以使用b.less里面定义的变量（样式）或者函数（样式）