scss 加入课程答案

【问题标题】：scss join classesscss 加入课程
【发布时间】：2012-06-19 12:37:49
【问题描述】：

所以，这是“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 技巧？谢谢。

【问题讨论】：

我认为当父选择器 (&) 由 # 十六进制或 . 点以外的其他东西连接时，SCSS 总是假定一个空格。可能是为了帮助人们编写有意义的代码，但他们显然忽略了这个用例......
将其作为答案发布并接受它，因为我认为没有一种“好”的方式来做到这一点。
是的。我不得不等待，没有足够的评级。

【解决方案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;
}

【讨论】：

【解决方案2】：

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

这是我使用的代码：

.elem {
    &__child {
        border: solid red;

        &-text {
            color: blue;
        }
    }
}

【讨论】：