Ability to prepend class to the selector

[LukasLt]

In many cases it makes sense to have elements styled based on context.

For example:

We have standard HTML widget

.... used in both home page and featured posts pages. Yet home page has , featured (technique commonly used in WordPress and similar CMS'es)

All else being equal, we want our article in featured posts page to have bigger H1 text.

At the moment we would have to put custom new css rule away from the main H1 definition like

.featured{
    .heading {
        h1{
            color: nice;
            font-size: normal
        }
    }
    .. lots of other  css'es
}
.home .featured .heading h1 { font-size: bigger}

This makes our code nightmare to manage, as totaly related rules are separated :/

---

However, if we just could have modifier to prepend css selectors to the stack like

.featured{
    .heading {
        h1{
            color: nice;
            font-size: normal;
            < .home {
                font-size: bigger;
            }
        }
    }
    .. lots of other  css'es
}

to compile to

.featured . heading h1 { color:nice; font-size: normal;}
.home .featured . heading h1 { font-size: bigger;}

This would be awesome :)

[lukeapage]

use

.home &

to prepend.

[LukasLt]

all these years of deep, deep pain is finally over...

[Soviut]

Read the docs because the & operator allows a lot of other useful functionality. Specifically things like applying :hover selectors:

.comment {
    background: white;

    &:hover { background: cornflowerblue; }
}

As well as relating elements that have multiple classes. For example class="comment important".

.comment {
    background: white;

    &.important { background: cornflowerblue; }
}

When something feels that deeply painful, assume someone has already solved that problem and seek out the solution.

[LukasLt]

I was using & for all pseudo selectors/classes, but somehow it never came to my mind I can use it prepend class'es :)

[lukeapage]

not to mention

& + &

:)

[LukasLt]

This one is also interesting discovery, yet when this is actually useful? :)

I have one more great idea (at least I hope so):

Some sort of mixin's and & version for cases when context determined by screen width.

Instead of adding .home, wrap it in the @media. e.g.

.featured{
    .heading {
        h1{
            color: nice;
            font-size: normal;
            @media max-size=100{
                font-size: small;
                span {
                     color: red;
                }                       
            }
        }
    }
}

In ideal case LESS could also group all identical @media max-size=100{} blocks into single one at top/bottom of the css file to save space by not repeating @media rules.

Or this is also already possible? :)

[Soviut]

I've already proposed grouping @media rules here #950

It seems the general consensus it that doing it automatically could break certain existing rules, but adding a @media-group syntax might help.

[lukeapage]

It works but doesn't group. There is a feature request to group..