使用less来根据参数值生成动态CSS规则并传递mixin

Question

在LESS中可以实现这样的目标吗？

.some-button(@className) {
  @className { .actionIcon; }
  tr:hover {
    @className { .actionButton; }
  }
}

我打电话的时候：

.some-button(.edit-action);

预期输出应为：

.edit-action { .actionIcon; }
tr:hover { .edit-action { .actionButton; } }

目前我收到了“@className {.actionIcon;}中无法识别的输入”错误：

.some-button(@className) {
  @className { .actionIcon; }
  tr:hover {

修改

我想要实现的另一件事是使用mixin作为mixin参数：

.actionButton(@buttonClassName; @buttonType) {
  @{buttonClassName} { 
    .actionIcon; 
  }
  tr:hover {
    @{buttonClassName} { 
        .actionHoverIcon; 
        @buttonType();
    }
  }
}

并且打电话是这样的：

.actionButton(~'.row-edit', button-harmful);

其中按钮有害是混合。

Answer 1

他们称之为"Selector Interpolation"，正确的语法是：

.some-button(@className) {
    @{className} { 
        /* ... */
    }
}

// usage:
.some-button(~'.edit-action');

或者（如果你知道你将只使用类，即.前缀选择器），或者这样：

.some-button(@className) {
    .@{className} {
        /* ... */
    }
}

// usage:
.some-button(edit-action);

Answer 2

回答你的第二个问题（即“使用mixin作为mixin参数”）：简而言之，目前这是不可能的。虽然有一些解决方法可以模拟此功能（您可以找到这些方法的简要信息here和here）。

例如：

.actionButton(@buttonClassName, @buttonType) {
    @{buttonClassName} {
        .actionIcon;
    }
    tr:hover {
        @{buttonClassName} {
            .actionHoverIcon;
            .call(@buttonType);
        }
    }
}

// usage:

.call(button-harmful) {.button-harmful}
.actionButton(~'.row-edit', button-harmful);