使用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);