dotLess - миксин с селектором, начинающимся с имени тега - PullRequest
Новая
       14

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

0 голосов
/ 02 февраля 2012

Я использую 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;
    ...
}

(То есть иметь имя тега как в базовом стиле, так и в том месте, где оно используется в качестве миксина.)

Есть ли способ заставить эту работу?

Обратите внимание, что я использую стиль базовых кнопок и стиль специальных кнопок в своем HTML.

1 Ответ

2 голосов
/ 02 февраля 2012

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

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

...