起因
在scss文件中，有这样的样式
$mui-steps:hello;
$mui-steps-item-prefix: hello-item;
.#{$mui-steps-item-prefix}{
&-wait &-description {
color: #000000;
}
}
这样样式是生效的。但是如果我这样写
$mui-steps{
.#{$mui-steps-item-prefix}{
&-wait &-description {
color: #000000;
}
}
样式无法生效。完全不知道为啥。于是我安装了node-sass，看一下解析成css的效果
前一个是这样：
.hello-item-wait .hello-item-description {
color: #000000;
}
的确，和元素的结构一致。
后一个是这样：
.hello .hello-item-wait .hello .hello-item-description {
color: #000000;
}
和元素的结果不一样了。
我猜测是这样的，sass估计无法解析空格。所以只能将空格复制。前一个正好解析成正确的结果。
这说明，在sass语法中混合css语法是有问题的。
当然，可以进一步去看一下sass的源码看他如何解析scss文件的。
