Add feature to use base class

[jaanush]

Sometimes it is usefull to have a base-class to put all your stuff into. This makes it easy to avoid conflicts with other elements on the page that are out of your control.

Most of the time you can just wrap your less code in a wrapper class but the reversed nesting with & breaks this approach.

.bs3 {
    .form-control {
        height: 34px;
        textarea& {
            height: auto;
        }
    }
}

becomes

.bs3 .form-control{
    height: 34px;
}

textarea.bs3 .form-control {
   height: auto;
}

which totally breaks the intended behaviour.

The only two approaches I can think of is to either append the wrapper class in the compiler or add a depth parameter to the reverse nesting.

[Soviut]

Why are you using the & symbol that way? Why not just use normal nesting?

.bs3 {
    .form-control {
        height: 34px;
        textarea {
            height: auto;
        }
    }
}

Regardless, a "parent depth" has been discussed in other issues. #1075

[jaanush]

That would not work since the textarea is not a child of the .form-control element but I understand where you are heading.

In this case it's not me using reverse nesting. What I'm doing is putting bootstrap in a wrapper class. They are using reverse nesting. The quick(er) fix would of course be to make them stop using it but I chose to post it here since I perceive this as a shortcoming of lesscss.

[seven-phases-max]

@jaanush, I suspect what you name a "base class" is simply a "namespace" (more details here), though to give some examples of using namespaces for your use-case we need to know how exactly .form-control is planned to be used.

I remember very similar discussion at stackoverflow recently, there's a solution if you simply need to prepend all bootstrap selectors with some extra class/id:

.namespace-bs {
    @import (less) "css/bootstrap.css";
}

[jaanush]

Yes, that is exactly what I do with the . bs3 class but I chose not to call it namespace since that's something a bit different.

If you look at my original example you can se how the reversed nesting prepends the textarea element to te "namespace" so it becomes textarea.bs3. This behavior breaks your example.

[seven-phases-max]

This behavior breaks your example.

No, it does not. This solution is not the same as you have already tried. Notice the extension of the imported file and (less) modifier.

[jaanush]

Sorry, missed that small distinction. That looks like it should work

[lukeapage]

tbh I'm a bit lost now.. can this be closed?

[seven-phases-max]

I think it can be closed (since there's no way to "fix" it and in the rest it is a sort of #1075 variation)

[jonschlinkert]

done