0

我正在使用这样的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 中同时使用了基本按钮样式和特定按钮样式。

4

1 回答 1

2

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

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

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

于 2012-02-02T15:52:54.173 回答