前言

• 参考：
• ① Less官网，
• ② CSDN老_L的文章Less系列之混合（Mixins）
• ③ 忘记谁的视频
• ④ 平时的笔记

普通Mixins

• .taCenter {
      width: 100px;
      height: 100px;
  }
  
  div {
      .inner {
          .taCenter;
      }
      .inner_2 {
          .taCenter;
      }
  }

• • 编译后：

• .taCenter {
      width: 100px;
      height: 100px;
  }
  
  div .inner {
      width: 100px;
      height: 100px;
  }
  
  div .inner_2 {
      width: 100px;
      height: 100px;
  }

• • 注意，编译后还是会带有.taCenter，其实我们并没有在编译后用到，如果不希望它编译的话，可以加上()

• .taCenter {
      width: 100px;
      height: 100px;
  }
  
  // .taCenter不应该出现在css文件里，将.taCenter改为.taCenter()
  div {
      .inner {
          .taCenter();
      }
      .inner_2 {
          .taCenter();
      }
  }

• • 编译后：

• div .inner {
      width: 100px;
      height: 100px;
  }
  
  div .inner_2 {
      width: 100px;
      height: 100px;
  }

带参数的Mixins

• • 最普通的带参数的混合，不传值就报错

• .taCenter(@width, @height) {
      width: @width;
      height: @height;
  }
  
  // 使用
  .inner {
      .taCenter(100px, 100px);
  }

• • 带默认值的混合

• .taCenter(@width: 100px, @height: 100px) {
      width: @width;
      height: @height;
  }
  
  // 如果想只传第二个参数，第一个参数用默认值的话
  .inner {
      // height:200px会替代默认值的100px
      .taCenter(@height:200px);
  }

!important

• • 使用 !important 关键字在 mixin 调用后，为了去标记 mixin 中的所有属性继承通过 !important

• .foo (@bg: #f5f5f5, @color: #900) {
      background: @bg;
      color: @color;
  }
  .unimportant {
      .foo();
  }
  .important {
      .foo() !important;
  }

• • 编译后：

• .unimportant {
      background: #f5f5f5;
      color: #900;
  }
  .important {
      background: #f5f5f5 !important;
      color: #900 !important;
  }

@arguments

• • @arguments 在 mixin 中有一个特殊的含义，当 mixin 被调用时，它包含了所有传入的参数

• .border(@width, @style, @color) {
      border: @arguments;
  }
  
  div {
      .border(1px, solid, black)
  }

• • 编译后：

• div {
      border: 1px solid black;
  }

匹配模式

• • mixin 有不同的行为，基于 @switch 的值

• .mixin(dark; @color) {
      color: @color;
  }
  .mixin(light; @color) {
      color: @color;
  }
  
  @switch: light;
  
  .class {
      .mixin(@switch; #888);
  }

• • 编译后：

• // 因为@switch是light，所以会去.mixin(light; @color)这里
  .class {
      color: #888;
  }

递归 Mixins

• • 在 Less 中，mixin 可以调用自己，当这种递归 mixin 与保护表达式和模式匹配相结合时，可以用来创建个各种迭代、循环结构

• .loop(@counter) when (@counter > 0) {
      .loop((@counter - 1));
      width: (10px * @counter);
  }
  
  div {
      .loop(5);
  }

• • 编译后：

• div {
      width: 10px;
      width: 20px;
      width: 30px;
      width: 40px;
      width: 50px;
  }

• • 递归的方式取决如何写：

• .generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
  }
  
  .generate-columns(4);

• • 编译后： 

• .column-1 {
    width: 25%;
  }
  .column-2 {
    width: 50%;
  }
  .column-3 {
    width: 75%;
  }
  .column-4 {
    width: 100%;
  }

Mixins护卫

• • Less 选择了通过有保护的 mixins 来实现条件执行

• .mixin(@a) when (lightness(@a) >= 50%) {
      background-color: black;
  }
  .mixin(@a) when (lightness(@a) < 50%) {
      background-color: white;
  }
  .mixin(@a) {
      color: @a;
  }
  
  // 使用
  .class1 { .mixin(#ddd) }
  .class2 { .mixin(#555) }

• • 编译后：

• .class1 {
      background-color: black;
      color: #ddd;
  }
  .class2 {
      background-color: white;
      color: #555;
  }
  

• • 在守卫中可用的比较操作符的完整列表是：>，>=，=，=<，<，此外，关键字 true 是唯一的真值，使这两个 mixin 等价：

• .truth(@a) when (@a) { … }
  .truth(@a) when (@a = true) { … }

• • 还可以相互比较参数，或与非参数进行比较：

• @media: mobile;
  
  .mixin(@a) when (@media = mobile) { ... }
  .mixin(@a) when (@media = desktop) { ... }
  
  .max(@a; @b) when (@a > @b) { width: @a }
  .max(@a; @b) when (@a < @b) { width: @b }

• • 使用 and 关键字组合守卫：

• .mixin(@a) when (isnumber(@a)) and (@a > 0) { … }

• • 可以通过用逗号分隔守卫来模拟 or 操作符。如果任何一个守卫的值为真，它被认为是匹配的：

• .mixin(@a) when (@a > 10), (@a < -10) { … }

• • 使用 not 关键字来否定条件：

• .mixin(@b) when not (@b > 0) { … }