css - scss join classes

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.

score 2 · Accepted Answer

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;
}

score 0 · Accepted Answer

Even if it's still not possible to join class names in SASS(3.2.6) I noticed that you can do it over at jsFiddle.

Here is the code I've used:

.elem {
    &__child {
        border: solid red;

        &-text {
            color: blue;
        }
    }
}

2 に答える 2