Question

所以，这是“LESS”代码的例子

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

将编译成：

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


.my_class_something_else{
    color: #f00;
}

加入了类“.my_class”和“_something_else”，但是使用SCSS，这段代码将编译成：

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


.my_class _something_else{
    color: #f00;
}

在“_something_else”下面的下划线之前的“.my_class”之后的空格

那么，在SCSS中有没有办法做这个LESS技巧？感谢。

Answer 1

我找到了解决方案。它比LESS更丑陋但有效：

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

将编译成

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

.my_class .my_class_comething_else{
    color: #f00;
}

Answer 2

即使在SASS（3.2.6）中仍然无法加入班级名称，我注意到你可以在jsFiddle上完成。

以下是我用过的代码：

.elem {
    &__child {
        border: solid red;

        &-text {
            color: blue;
        }
    }
}