SCSS：如何不在 CSS 文件中重复声明？答案

【问题标题】：SCSS: How to not repeat declaration in CSS file?SCSS：如何不在 CSS 文件中重复声明？
【发布时间】：2019-01-04 22:10:24
【问题描述】：

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

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

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

【问题讨论】：

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

【讨论】：

【解决方案2】：

这应该有效：

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

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

【讨论】：