Namespace selectors

[gnomishperson]

I'm not sure how exactly to explain this or if this is even an intended use or not, but I am currently getting a syntax error on compile attempts for using namespaces in such a manner... Here's an example:

.TopLevel {
    float:left;
    .secondLevel {
        display:block;
        a {
            text-decoration:none;
        }
    }
}

Now the goal I'm trying to achieve is the properties of a into another class / mixin.

.AnotherLevel {
    a {
        .TopLevel > .secondLevel > a;
    }
}

If I leave out the a and just use .TopLevel > .secondLevel;, I get no syntax errors. Now I'm assuming this is because of the general use of the element a and not having a specific identifier or class on it. So I'm not sure if what I'm trying to do isn't "intended use" or an actual bug.

Now I could probably create a separate mixin all together and apply that inside of .TopLevel > .secondLevel > a and inside of .AnotherLevel > a, but I'm curious on whether or not the above is usable.

[frizzr]

Although I'm not one of the developers of less, I have also noticed that the only things eligible for the .TopLevel > .secondLevel > ... syntax are other mixins for every one of those in the step list.

I always thought it would be a neat idea to be able to use "regular" CSS selectors as mixins, but not sure what the effort level is there. I do know it would be very handy, though.

As you suggested, what I tend to do as a workaround is to add a class or id selector to the a:

.TopLevel {
    float:left;
    .secondLevel {
        display:block;
        a, #a {
            text-decoration:none;
        }
    }
}

Be warned that this does put in extra CSS code and makes an ID of a for a descendant of .secondlevel but it will allow you to get close to what you want:

.AnotherLevel {
    a {
        .TopLevel > .secondLevel > #a; 
    }
}

Now if I could only do this to suppress the extra CSS code generated by using a parametric mixin with the "a" selector, like this:

.TopLevel {
    float:left;
    .secondLevel {
        display:block;
        a, #a() {
            text-decoration:none;
        }
    }
}

The #a() works by itself to suppress #a from making it to the generated CSS code, but I get a syntax error if this is part of a list. (Admittedly I am using dotless and not less, so maybe that is allowed in less.js.)

[lukeapage]

related to #76 but slightly different so keeping around.

[lukeapage]

closing as designed