注释 //

// 这是less单行注释，注释中的内容不会被编译到css文件中
/* 这是原版css注释，里面的内容会被编译到css文件中去 */

后代嵌入

.box1{
  height: 100px;
  width: 100px;
  .box2{
     border-radius: 50%;
       }
     }

编译后为

.box1{
    height: 100px;
    width: 100px;
     }
.box1 .box2{
    border-radius: 50%;
        }

darken() 加深

body{
    background-color: darken(#bfa,10%);
}

这个函数用于加深颜色

• 第一个参数是颜色
• 第二个参数是百分比

$样式名

使用$样式名可以直接引用其它属性的名

.box{
    height: 300+500px;
    width: 500 * 2px;
    width: 1600 / 40px;
    height: $width;
}

计算

使用值时，可以直接计算

.box{
    height: 300+500px;
    width: 500 * 2px;
}

@ 定义变量

@red:#f10000;
@w:100px;
@a:10px;
.box{
    height: 300+500px;
    width: 500 * 2px;
    width: 1600 / 40px;
    height: $width;
    border-width: @a;
}

@｛变量名｝

可以将变量的值作为选择器使用

@className:box2;
.@{className}{
    width: 100px;
}

引入变量方式

1、直接写
2、通过大括号引入

使用变量

使用变量时候依据就近原则
同样都在括号里面，后面把前面覆盖

@a:10px;
@className:box2;
.box{
    @a:20px;
    height: 300+500px;
    width: 500px;
    height:  $width;
    border-width: @a;
}

每一个{}都是一个独立作用域

@a:10px;
.box{
    @a:20px;
    height: 300+500px;
    width: 500px;
    height:  $width;
    border-width: @a;
}
.box1{
    width: @a;
}

• 我们使用变量时，会先在当前的{}中寻找
• 如果找到则直接使用，如果没有则去上一级的{}中寻找
• 找到则使用，如果没有则继续去上一级寻找，直到找到为止
• 如果一直到最外层依然没有，则报错（无法编译）

mixins

通过mixins将不同类的样式进行混用
mixins的使用有两种方式

1、源码

.box1{
   height: 100px;
   width: 100px;
     }
.box2{
     .box1()
     }

混用的样式只能用类选择器，不能用元素选择器
**
编译后

.box1{
    height: 100px;
    width: 100px;
     }
.box2{
    height: 100px;
    width: 100px;
     }

2、:extend()

可以将其他的选择器上的样式，扩展到当前的选择器上
和mixins不同，mixins是将全部样式复制了一遍
extend（）是通过选择器分组的形式对样式进行扩展

.box2:extend(.box1){
    font-size:14px;
}

编译后为

.box1 .box2{
    width:100px;
  height:100px;
}
.box2{
    font-size:14px;
}

.box2:extend(.box1 all){} ----------扩展box1相关的所有样式

定义mixins（传参）

定义mixins时候，如果在名字后边添加了（）则mixins中的样式不会被编译到css文件中

.box1(){
   height: 100px;
   width: 100px;
       }
.box2{
   .box1()
     }

编译后

.box2{
   height: 100px;
   width: 100px;
     }

而且在括号中可以定义参数
这个参数相当于定义了一个变量，但是并没有赋值

.hello(@a){
   width:@a;
   height: 100px;
   backgroud-color:red;
     }

使用mixins时，可以向括号中传值，我们所传的值会赋值给变量

.hello(@a,@b){
    width:@a;
    height: @b;
    backgroud-color:red;
    }                 ------------相当于定义了一个函数
.wrapper{
    .hello(30px,50px)
    }    ------------------相当于使用函数

形参/实参

定义函数的时候叫形参，形式参数，没有值
调用的时候交实参，实际参数

默认参数

可以在mixins中指定默认参数

.border(@bw:1px)

.border(@bw:1px){
    border:@bw red solid;
}
h1{
    .hello(300px,400px)
    .border();
}

传递参数时默认情况下必须按照顺序
传递实参时可以按照顺序或者参数名来传递
按照参数名传参那么顺序就不重要了

.hello(@b:30px,@a:50px);

& 外层选择器

.box1{
    width:100px;
    .box2{
        color:red;
        .box3{
            background-color:#bfa;
        }
    }
}
&{
    height:345px;
}

ul{
    background-color:#bfa;
    & > li{
        float:left;
    }
}

.box4:extend(ul){
}
.box4{
    &:extend(ul);
}
这两种写法是一样的

@import导入

用来导入，可将外部的less代码导入到目前的less中
可以分功能模块写好less，然后导入转css，这样降低了不同文件之间的耦合