CODEWITHSUNDEEP
cssless
CMCDragonkai
CMCDragonkai

Reputation: 6372

Less Namespaces Pseudo and Other Selectors

How do you refer to a namespaced class with a pseudo selector?

#Namespace{
    .class:focus{
        prop: value;
    }
    .class + .class{
        prop: value;
    }
}

.anotherClass{
    #Namespace.class:focus(); //this does not work
    #Namespace.class:focus; //not working
    #Namespace > .class:focus(); //this does not work
    #Namespace > .class:focus; //not working
    #Namespace > .class + .class; //not working either
}

Upvotes: 0

Views: 131

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

# pseudo-selectors:

In short: you can't. Only id and class (i.e. # and . respectively) selectors can be used as mixins. Pseudo and tag selectors cannot. See Mixins.

If you're planning to re-use some styles just define those as a (parametric) mixin: 

#namespace {
    .whatever-suitable-name() {
        prop: value;
    }

    .class:focus {
        .whatever-suitable-name();
    }
}

.anotherClass {
    #namespace > .whatever-suitable-name();
}

# .class + .class:

#Namespace > .class + .class; // not working either

Partially because of above (i.e. not every selector can be used as a mixin), but in this particular case you actually still can access that selector combination. Though the only "officially recommended" syntax for invoking a namespaced mixin is: #namespace > .mixin, unofficially: "combinators" (e.g. >, +, ~, whitespace etc.) are essentially ignored when compiler matches selectors for a mixin call, so:

#namespace {
    .class + .class {
        prop: value;
    }
}

.anotherClass {
    #namespace > .class > .class; // OK
    #namespace .class .class;     // OK
    #namespace.class.class;       // OK
    #namespace.class > .class;    // OK
    // etc.
}

See also #1205.

Upvotes: 2

Related Questions