Combine classes

Question

Here's an example of some "LESS" code:

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

After compilation, it turns into this:

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


.my_class_something_else{
    color: #f00;
}

The classes ".my_class" and "_something_else" were combined. However, in SCSS, the code looks like this:

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


.my_class _something_else{
    color: #f00;
}

Note the whitespace after ".my_class" before the underscore in "_something_else".

Is there a way to achieve this same trick in SCSS instead of LESS? Any insights would be appreciated. Thank you.

Answer 1

Answer №1

I came up with a solution that may not be as clean as in LESS, but it does the job:

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

after compilation will look like this:

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

.my_class .my_class_comething_else{
    color: #f00;
}

Answer 2

I came up with a solution that may not be as clean as in LESS, but it does the job:

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

after compilation will look like this:

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

.my_class .my_class_comething_else{
    color: #f00;
}

Answer 3

Although SASS (3.2.6) does not currently support joining class names, I discovered that it can be done on jsFiddle.

Below is the code snippet I used:

.elem {
    &__child {
        border: solid red;

        &-text {
            color: blue;
        }
    }
}

Answer 4

Although SASS (3.2.6) does not currently support joining class names, I discovered that it can be done on jsFiddle.

Below is the code snippet I used:

.elem {
    &__child {
        border: solid red;

        &-text {
            color: blue;
        }
    }
}