05.less中混合的通用匹配模式和匹配模式

发表于 | 分类于

less中混合的通用匹配模式

​ 假如现在有这么一个需求：用css画一个三角形，方向可以控制上下左右，由于只是方向不同，所以可能会造成很多的重复代码，于是可以考虑用混合封装代码，然后利用匹配模式来控制方向。

​ 这里面利用到的知识点：通用匹配模式和匹配模式

  • 什么是通用的匹配模式?
    无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码
1
2
3
4
5
.triangle(@_, @width, @color){
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}

混合的匹配模式

  • 混合的匹配模式，就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    .triangle(@_, @width, @color){
      width: 0;
      height: 0;
      border-style: solid solid solid solid;
    }
    .triangle(Down, @width, @color){
      //width: 0;
      //height: 0;
      border-width: @width;
      //border-style: solid solid solid solid;
      border-color: @color transparent transparent transparent;
    }
    .triangle(Top, @width, @color){
      //width: 0;
      //height: 0;
      border-width: @width;
      //border-style: solid solid solid solid;
      border-color: transparent transparent @color transparent;
    }
    .triangle(Left, @width, @color){
      //width: 0;
      //height: 0;
      border-width: @width;
      //border-style: solid solid solid solid;
      border-color: transparent @color transparent transparent;
    }
    .triangle(Right, @width, @color){
      //width: 0;
      //height: 0;
      border-width: @width;
      //border-style: solid solid solid solid;
      border-color: transparent transparent transparent @color;
    }

    div{
      /*
      混合的匹配模式
      就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合
      */
      //.triangle(Down, 80px, green);
      //.triangle(Top, 80px, green);
      //.triangle(Left, 80px, green);
      .triangle(Right, 80px, green);
    }
    • 有点函数重载的意思，混合同名，因为参数传入的不同而导致执行的混合不同，但都会去执行通用匹配模式。