Search code examples
csslessstylesheet

CSS Scopes Equation without Combine

I need to equation without combine multiple scopes, for example with native:

Native CSS:

.test 
{
    color: black;
}

.demo 
{
    color: black;
}

And combined version:

.test,
.demo 
{
    color: black;
}

But i need following:

@.test: .demo; // Something like that equation, all test classes equal demo class

.demo 
{
    color: black;
}

If it isnt possible with CSS, as a last resort i can use LESS

Solution

  • In LESS, You can use the extend function to achieve this.

    .demo 
{
    color: black;
}
.test:extend(.demo){}; /* extends the properties of the .demo */
/* .test:extend(.demo all){}; /* the all keyword would extend nested sub classes of .demo also */

    Demo