Question

So, this is the example of “LESS” code

.my_class{
    color: #000;
    font: 12px/12px Arial;
    &_comething_else{ color: #f00; }
}

which will be compiled into this:

.my_class{
    color: #000;
    font: 12px/12px Arial;
}


.my_class_something_else{
    color: #f00;
}

Classes “.my_class” and “_something_else” were joined,
but with SCSS this code will be compiled into this:

.my_class{
    color: #000;
    font: 12px/12px Arial;
}


.my_class _something_else{
    color: #f00;
}

where is whitespace after “.my_class” before underscore in “_something_else”

So, is there any way to do this LESS trick in SCSS?
Thanks.

Answer 1

I found a solution. It’s more uglier than in LESS but works:

$ns: ".my_class";
.my_class{
    color: #000;
    font: 12px/12px Arial;
    #{$ns}_comething_else{ color: #f00; }
}

will be compiled into

.my_class{
    color: #000;
    font: 12px/12px Arial;
}

.my_class .my_class_comething_else{
    color: #f00;
}