使用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作为混入参数：

.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);