less语法-匹配模式-运算-嵌套（关键）-避免编译-！important

less的匹配模式，代码如下

.tran(down,@w:5px,@color:#ccc){//向上
    border-width: @w;
    border-color:@color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.tran(top,@w:5px,@color:#ccc){//向下
      border-width: @w;
    border-color:transparent transparent @color transparent;
    border-style:dashed dashed solid dashed;
}
.tran(right,@w:5px,@color:#ccc){//向左
      border-width: @w;
    border-color:transparent @color transparent transparent;
    border-style:dashed solid dashed dashed;
}
.tran(left,@w:5px,@color:#ccc){//向右
      border-width: @w;
    border-color:transparent transparent transparent @color;
    border-style:dashed dashed dashed solid;
}
.tran(@_,@w:5px,@color:#ccc){//@_的固定写法，以上所有.tran的属性都会加上@_里面的内容
    width:0;
    height: 0;
    overflow: hidden;
}
.sanjiao{
    .tran(top)
}

css此时的代码：

.sanjiao {
  border-width: 5px;
  border-color: transparent transparent #cccccc transparent;
  border-style: dashed dashed solid dashed;
  width: 0;
  height: 0;
  overflow: hidden;
}

匹配模式，定位，可当做class（）来使用，方法一直，代码如下

  .post(r){
    position: relative;
}
.post(a){
    position: absolute;
    right: 0;
}
.post{//两种都可以
    position: absolute;  
}
.post(f){
    position: fixed;
}
.rec{
    width: 100px;
    height: 100px;
    background: red;
    .post(a);
}

此时css代码

.post {
  position: absolute;
}
.rec {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  right: 0;
}

运算，less代码，两个数值其中一个带有单位即可

@test-01:200px;
.test5{
    width: @test-01+20;
}

css此时代码

.test5 {
  width: 220px;
}

嵌套 ，less的一种写法，可方便代码的维护，一个组件的嵌套在一起使用，明细清晰，less代码如下：

.dis-ul{
    width: 200px;
    height: 100px;
    list-style: none;
    
    li{
        margin: 20px auto;
    }
    a{//写在平级，减少嵌套层可减少css匹配次数
        float: right;
        &:hover{//hover事件直接写在里面，&代表上一层选择器
            color: red;
        }
    }
}

此时css代码

.dis-ul li {
  margin: 50px auto;
}
.dis-ul a {
  float: right;
}

@arguments包含了所有传进来的参数
.border-1(@w:20px,@c:red,@xx:solid){
border:@arguments
}
.cab{//改动数据跟之前的一样在括号内改动即可
width: 50px;
height: 50px;
.border-1(50px)
}

避免编译,可用在滤镜，避免软件运行不必要的事情，~’ '
less代码如下：

.test6{
    width:~'calc(300px-20px)';
}

css代码：

.test6 {
  width: calc(300px-20px);
}

!important优先级最高，less代码

.cab{
    width: 50px;
    height: 50px;
    .border-1(50px)!important;
    }

css代码

.cab {
  width: 50px;
  height: 50px;
  border: 50px #ff0000 solid !important;
}

关于&，若在html中，父元素class为img，而子元素为img-red。则，

.img{
    width: 200px;
    height: 200px;
    background: red;
    &-red{
        background: black;
        width: 100px;
        height: 100px;
    }
}

此时css文件代码

   .img {
  width: 200px;
  height: 200px;
  background: red;
}
.img-red {
  background: black;
  width: 100px;
  height: 100px;
}

关于清除浮动时after的写法，伪类的写法，用&

p{
        font-size: 23px;
        margin-top: 40px;
        &:after{
            
        }
    }

在文档的开头，关于less文件的引入和用法

@charset "UTF-8";//文档头

@import "comom";//引入新的less文件

@import "a.css";//引入新的css文件

IE6下，当块元素同时具备margin和float时，会产生双边距，横向margin会被放大两倍。
解决方法时display:inline;