注释

less文件内的单行注释(//)，编译之后不会在CSS文件内，只有多行注释(/**/)会保留

嵌套

普通嵌套

#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    margin: @zero auto;
    #inner{
        height: 100px;
        background: pink;
        margin: auto;
    }
    &-container{
         border: 1px solid;
    } 
    .test{
        width: 200px;
    }
}

以类似html元素节点的方式支持层级关系，其中&指代父类

冒泡嵌套

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

编译为：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

@medie,@supports,@document等@规则，会提升到最外层，内部的选择器顺序不变而@font-face ,@keyframes则不会

变量

变量分为普通变量，选择器变量，CSS属性变量和URL变量

/* 首先变量声明  */
@zero:0;           /* 普通 变量 */  
@selector:#wrap;   /* 选择器 变量 */  
@width:width;      /* CSS属性 变量 */  
@url:"../img/zdy.jpg";  /* URL 变量 */  
/* CSS规则正文  */
*{
    margin: @zero;
    padding: @zero;
}
@{selector}{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: @zero auto;
    background: url("@{url}");
    #inner{
        @{width}: 100px;
        height: 100px;
        background: pink;
        position: absolute;
        left: @zero;
        right: @zero;
        top: @zero;
        bottom: @zero;
        margin: auto;
    }
    .test{
        width: 200px;
    }
}

选择器变量，属性变量和URL变量在使用的时候必须使用大括号包裹@{变量名}

运算

可以对变量，数字，颜色进行计算，并自动进行单位换算，单位以最左侧单位为准，如果没有意义则忽略单位

<br class="Apple-interchange-newline"><div></div>
@conversion-1: 5cm + 10mm; // 以cm为单位
@conversion-2: 2 - 3cm - 5mm; // 以cm为单位
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%  
@base: 2cm * 3mm; // 结果是 6cm

特例

calc()不对表达式计算

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();  //将 bordered class 混入
}