Question

I’m using a dotLess ‘mixin’ like this:

.base-button-style
{
    ...
}

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

This works fine. But now I need to change the selector of the base style to give it a higher precedence by adding the tag name:

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

However, dotLess doesn’t seem to like this, so the .less file can’t be “parsed” at all. I’ve tried changing it to this with no better result:

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

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

(That is, having the tag name in both the base style and where it is used as a mixin.)

Is there a way to make this work?

Note that I use both base-button-style and specific-button-style in my HTML.

Answer 1

I’m not sure if the mixins can have selectors, as they are effectively functions that are stripped out of the final code.

It might be better to nest your .specific-button-style under the .base-button-style like this:

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

The &: operator for the .edit and .orange classes effectively produces .button.edit and .button.orange classes. The HTML element thus has class='button edit'. That will work on IE7+, and all the usual others.