Question

我正在使用这样的dotLess'mixin'：

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

（也就是说，在基本样式中使用标记名称以及将其用作mixin。）

有没有办法让这项工作？

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

Answer 1

我不确定mixin是否可以有选择器，因为它们实际上是从最终代码中删除的函数。

最好将.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类的＆amp;运算符有效地生成.button.edit和.button.orange类。因此HTML元素具有class='button edit'。这将适用于IE7 +，以及所有其他常见的。

dotLess - 以带有标签名称的选择器mixin

1 个答案: