运算和避免编译

• • +、-、*、/ 可以对任何数字、颜色或变量进行运算，计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换

• /* 5cm + 1cm = 6cm */
  @width: 5cm + 10mm;
  
  /* 因为以左侧单位为准，自动转换成px，2px + 3px - 2px = 3px */
  div {
      width: 2 + 3px - 2mm;
  }

• • 颜色也可以进行运算

• @color: #224488 / 2; // 结果是 #12244
  background-color: #112244 + #111; // 结果是 #223355

• • 在CSS会用到calc用来计算，但是在Less它不大一样，如果希望得到的是：

• div {
      width: calc(100px - 20px);
  }
  

• • 在Less这样写，它会编译成：

• div {
      /* 因为Less直接将100px - 20px了 */
      width: calc(80px);
  }
  

• • 所以我们需要避免Less编译：

• div {
    width: ~"calc(100px - 20px)"
  }
  

• • 同样~""也可以用到@media上

• @min768: ~"(min-width: 768px)";
  
  .element {
      @media @min768 {
          font-size: 1.2rem;
      }
  }

• • 编译为：

• @media (min-width: 768px) {
      .element {
          font-size: 1.2rem;
      }
  }

• • 注意，从 Less 3.5 开始，可以简写为：

• @min768: (min-width: 768px);
  
  .element {
      @media @min768 {
          font-size: 1.2rem;
      }
  }

• • 在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了

作用域

• • Less 中的作用域与 CSS 中的作用域非常类似，首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承

• @var: 0;
  
  div {
      @var: 1px;
      margin: @var; // 1px
  }

• • 延时加载/懒加载，{}是一个块级作用域，会等全部加载好，所以@var变成了3px，margin就会是3px而不是2px

• div2 {
      @var: 2px;
      margin: @var; // 3px
      @var: 3px;
  }