Less Mixin 的骚操作, 减少重复代码

[yinxin630]

想要实现一个换肤功能, 样式如下:

@a: red;
@b: blue;
@c: green;

.skin-a {
  .title {
    color: @a;
  }
  .content {
    color: @a;
  }
}

.skin-b {
  .title {
    color: @b;
  }
  .content {
    color: @b;
  }
}

.skin-c {
  .title {
    color: @c;
  }
  .content {
    color: @c;
  }
}

写起来很冗余是不是? 可以利用 mixin 来简化操作

@a: red;
@b: blue;
@c: green;

.skin(@color) {
  .title {
    color: @color;
  }
  .content {
    color: @color;
  }
}

.skin-a {
  .skin(@a);
}
.skin-b {
  .skin(@b);
}
.skin-c {
  .skin(@c);
}

带括号的 mixin 是不会输出的

参考

https://www.html.cn/doc/less/features/#mixins-feature-not-outputting-the-mixin-