css - scss 加入课程

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

“.my_class”之后的空格在“_something_else”中下划线之前的位置

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

score 2 · Accepted Answer

我找到了解决方案。它比 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;
}

score 0 · Accepted Answer

即使仍然无法在 SASS(3.2.6) 中加入类名，我注意到您可以在 jsFiddle 上重新完成。

这是我使用的代码：

.elem {
    &__child {
        border: solid red;

        &-text {
            color: blue;
        }
    }
}

2 回答 2