Question

我想编写一个可以生成名为alt的LESS函数的插件，该函数可以执行以下转换：

.button {
    background-color: alt(red, blue);
    color: alt(black, white);
}

输出以下内容：

.button {
    background-color: red;
    color: black;
    body.alt & {
        background-color: blue;
        color: white;
    }
}

似乎没有太多关于在网站上编写LESS插件的文档，所以希望有人可以提供一个如何写这个的例子:)谢谢！

Answer 1

我认为mixin最适合这个。类似下面的内容：

.alt(@property, @primary-color, @alternate-color) {
  @{property}: @primary-color;
  body.alt & {
    @{property}: @alternate-color;
  }
}

.button {
  .alt(background-color, red, blue);
  .alt(color, black, white);
}

将编译为以下CSS：

.button {
  background-color: red;
  color: black;
}
body.alt .button {
  background-color: blue;
}
body.alt .button {
  color: white;
}

通过LESS插件生成规则

1 个答案: