合并

• • 在box-shadow后面添加一个+，就可以用逗号来追加属性值

• .mixin() {
      box-shadow+: inset 0 0 10px #555;
  }
  .myclass {
      .mixin();
      box-shadow+: 0 0 20px black;
  }

• • 编译后：

• .myclass {
      box-shadow: inset 0 0 10px #555, 0 0 20px black;
  }

• • 在transform后面添加+_，就可以用空格来追加属性值

• .mixin() {
      transform+_: scale(2);
  }
  .myclass {
      .mixin();
      transform+_: rotate(15deg);
  }

• • 编译后：

• .myclass {
      transform: scale(2) rotate(15deg);
  }
  

继承

• • 为什么要用继承？先看一个例子

• // HTML
  <div id="wrap">
      <div class="inner">inner1</div>
      <div class="inner">inner2</div>
  </div>

• •  Less普通写法（其实这样写也可以，挺方便的，但是为了体现继承和混合的区别）

• #wrap {
      position: relative;
      width: 300px;
      height: 300px;
      border: 1px solid;
      margin: 0 auto;
      .inner {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          margin: auto;
          &:nth-child(1) {
              width: 100px;
              height: 100px;
          }
          &:nth-child(2) {
              width: 50px;
              height: 50px;
          }
      }
  }

• • 改为混合形式

• .taCenter(@width, @height) {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      width: @width;
      height: @height;
  }
  
  #wrap {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto;
      .inner {
          &:nth-child(1) {
              .taCenter(100px, 100px)
          }
          &:nth-child(2) {
              .taCenter(50px, 50px)
          }
      }
  }

• • 编译后：

• #wrap {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto;
  }
  #wrap .inner:nth-child(1) {
      // |↓-↓-重复的代码-↓-↓|
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      // |↑-↑-重复的代码-↑-↑|
      width: 100px;
      height: 100px;
  }
  #wrap .inner:nth-child(2) {
      // |↓-↓-重复的代码-↓-↓|
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      // |↑-↑-重复的代码-↑-↑|
      width: 50px;
      height: 50px;
  }

• • 这里发现了很多重复的代码，按理来说应该编译为：

• #wrap .inner:nth-child(1),
  #wrap .inner:nth-child(2) {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
  }
  #wrap .inner:nth-child(1) {
      width: 100px;
      height: 100px;
  }
  #wrap .inner:nth-child(2) {
      width: 50px;
      height: 50px;
  }

• • 这样会使得css体积更小（现在混合里的代码少，所以看不出来）
• • 这个时候就需要继承了，继承的.taCenter不能带变量

• .taCenter {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
  }
  
  #wrap {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto;
      // 这里的意思就是会将.inner和.taCenter用逗号连接在一起，有.taCenter的样式
      .inner:extend(.taCenter) {
          &:nth-child(1) {
              width: 100px;
              height: 100px;
          }
          &:nth-child(2) {
              width: 50px;
              height: 50px;
          }
      }
  }

• • 编译后：

• // 上面说了，会用逗号连接在一起继承.taCenter的样式
  // 有4个的原因是因为&:nth-child(1)，&:nth-child(2)和.inner平级了，都会继承
  // 这里虽然实现了但是还是不大友好，后面优化
  
  .taCenter,
  #wrap .inner,
  #wrap .inner:nth-child(1),
  #wrap .inner:nth-child(2) {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto; 
  }
  #wrap {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto;
  }
  #wrap .inner:nth-child(1) {
      width: 100px;
      height: 100px;
  }
  #wrap .inner:nth-child(2) {
      width: 50px;
      height: 50px;
  }

• • 不希望#wrap .inner:nth-child(1)和#wrap .inner:nth-child(2)也继承.taCenter的样式，我们可以修改为

• .taCenter {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
  }
  
  #wrap {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto;
      .inner {
          /* 将继承写在inner里面 */
          &:extend(.taCenter);
          &:nth-child(1) {
              width: 100px;
              height: 100px;
          }
          &:nth-child(2) {
              width: 50px;
              height: 50px;
          }
      }
  }

• • all 继承所有的状态

• .taCenter {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
  }
  // .taCenter的hover和focus状态
  .taCenter:hover {
      width: 20px!important;
  }
  .taCenter:focus {
      width: 30px!important;
  }
  
  #wrap {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto;
      .inner {
          // 加个all，继承所有的状态
          &:extend(.taCenter all);
          &:nth-child(1) {
              width: 100px;
              height: 100px;
          }
          &:nth-child(2) {
              width: 50px;
              height: 50px;
          }
      }
  }

• • 编译后：

• .taCenter,
  #wrap .inner {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
  }
  // |↓-↓-继承了所有的状态-↓-↓|
  .taCenter:hover,
  #wrap .inner:hover {
      width: 20px !important;
  }
  .taCenter:focus,
  #wrap .inner:focus {
      width: 30px !important;
  }
  // |↑-↑-继承了所有的状态-↑-↑|
  #wrap {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto;
  }
  #wrap .inner:nth-child(1) {
      width: 100px;
      height: 100px;
  }
  #wrap .inner:nth-child(2) {
      width: 50px;
      height: 50px;
  }

• • 总结：
• ① 继承可让多个选择器应用同一组属性，最终编译为并集选择器
• ② 性能提高了，如果公共代码特别多的时候编译的CSS体积就会小一点
• ③ 灵活度降低了，因为不能带参数了，没有混合灵活