dotLess — миксин с селектором, начинающимся с имени тега

Я использую 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 как стиль базовой кнопки, так и стиль конкретной кнопки.


css dotless
person haagel    schedule 02.02.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не уверен, что миксины могут иметь селекторы, поскольку они фактически являются функциями, которые вырезаны из окончательного кода.

Возможно, было бы лучше вложить .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+ и во всех остальных.

person zim2411    schedule 02.02.2012
comment
Я использовал другое решение, чем ваше, но спасибо за подсказку об операторе &! Кажется, вы правы в том, что класс, который вы смешиваете, не может иметь выбора, кроме имени класса. - person haagel; 06.02.2012
comment
Какое решение вы в итоге использовали? - person Garrett Lancaster; 24.03.2013