减少使用以基于参数值和传递的mixin生成动态CSS规则 [英] Use less to generate dynamic CSS rules based on parameter value and passed mixin

问题描述

是否可以在LESS中实现类似的目标?

It is possible to achieve something like this in LESS?

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

当我打电话时:

.some-button(.edit-action);

预期输出应为:

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

当前，我收到此"@className {.actionIcon;}中无法识别的输入"错误:

Currently I'm getting this "Unrecognized input in @className { .actionIcon; }" error:

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

编辑

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

EDIT

Another thing I would like to achieve is to use a mixin as mixin parameter:

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

呼叫就像这样:

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

其中对按钮有害是混入.

推荐答案

他们称其为选择器插值" ，正确的语法是:

They call this "Selector Interpolation", the correct syntax is:

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

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

或者(例如，如果您只知道使用类，即.前缀选择器)，也可以这样:

Or alternatively (if you know you will use only classes, i.e. . prefixed selectors) like this:

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

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

这篇关于减少使用以基于参数值和传递的mixin生成动态CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！