css - dotLess - 与以标签名称开头的选择器混合

Question

我正在使用 dotLess像这样“混合”:

.base-button-style
{
    ...
}

.specific-button-style
{
    .base-button-style;  //mixin
    ...
}

这很好用。但是现在我需要更改基本样式的选择器，通过添加标签名称来赋予它更高的优先级:

input.base-button-style
{
    ...
}

然而，dotLess 似乎并不喜欢这样，所以 .less 文件根本无法“解析”。我已经尝试将其更改为此，但没有更好的结果:

input.base-button-style
{
    ...
}

.specific-button-style
{
    input.base-button-style;
    ...
}

(也就是说，在基本样式和用作混入的地方都有标签名称。)

有没有办法让它工作？

请注意，我在我的 HTML 中同时使用了 base-button-style 和 specific-button-style。

Answer 1

我不确定混入是否可以有选择器，因为它们是从最终代码中剥离出来的有效函数。

将 .specific-button-style 嵌套在 .base-button-style 下可能会更好，如下所示:

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    .border-radius(.5em);
    .box-shadow(0, 1px, 2px, rgba(0,0,0,.2));
    font-weight:bold;
    font-size:15px;

    @button-color: #faa51a;
    &.edit, &.orange{
        .button-normal(@button-color);
        &:visited {.button-normal(@button-color);}
        &:hover {.button-hover(@button-color);}
        &:active {.button-active(@button-color);}
    }
}

.edit 和 .orange 类的 &: 运算符有效地生成了 .button.edit 和 .button.orange 类。 HTML 元素因此具有 class='button edit'。这将适用于 IE7+，以及所有其他常见的。