SCSS：如何不重复CSS文件中的声明？

Question

所以我要使用两个使用相同选项的独立图形：

#basicMob .progress {
    background: green none repeat scroll 0 0;
}

#notBasicMob .progress {
    background: green none repeat scroll 0 0;
}

如何声明#basicMob和#notBasicMob并让.progress影响它们两者？我一直在尝试类似的东西：

#basicMob,
#notBasicMob .progress {
    background: green none repeat scroll 0 0;
}

但是到目前为止，我还无法找到有效的方法。非常感谢。

Answer 1

鉴于具有.progress类的元素是从具有这些ID之一的元素派生的，则以下模式应起作用：

.parent {
    .child {}
}

所以在您的情况下：

#basicMob,
#notBasicMob {
     .progress {
         background: green none repeat scroll 0 0;
}

注意：如果具有这些ID的元素也具有.progress类，则可以根据需要使用&选择元素：

.some-class {
   &.another-class {}
}

有关这些模式的更多信息，请参见：https://css-tricks.com/the-sass-ampersand/

Answer 2

这应该有效：

#basicMob .progress,
#notBasicMob .progress {
    background: green none repeat scroll 0 0;
}

您还需要在逗号前使用“ .progress”的选择器。