CSS class alias [duplicate]

Question

Is it possible to generate css class alias?

Details:

I'm using bootstrap.css framework and I've got some html that I cannot change. This html has some container with class "awesomnes-container" and some items inside with like "awesomnes-item".

Lets say I want container to bevahe exacly like .row class and item like .col-lg-12

I know its pretty simple to add needed classes with javascript but I find it not 100% stable solution and in case of failture the consequences would be huge.

I also dont want to modify oryginal bootstrap file as It would be nightmare for updates. I'm using some 'overlay' css file loaded after bootstrap.

Answer 1

Bootstrap's CSS is written in LESS form by default, so it would be better to include an extra .less file and use its extend function to map your HTML's classes to the Bootstrap classes you want them to implement.

In this case, you'd be looking at:

.awesomnes-container {
    &:extend(.row);
}

.awesomnes-item{
    &:extend(.col-lg-12);
}