Css Sass-使用一些样式包装引导程序的第二个版本

谢谢你阅读这篇文章

我在站点上有1个元素，假设如下：

<div id="other-div"><h1>Test other-div</h1></div>
<div id="app"><h1>Test app</h1></div>

@import 'custom';   
#app {
     @extend %h1;
}

（假设自定义css具有内部h1{color:red}）

问题: custom.scs中的样式也适用于#other-div。如何区分这两个元素？因此，网站其他部分的样式不应适用于#应用程序，而#应用程序中元素的样式不应适用于网站其他部分

---

谢谢

在官方SASS文档中，它说我们可以进行嵌套导入。看看这个

或者，您可以将样式括在

custom.scss

中的占位符选择器中，如下所示：

%h1 {
   color: red
}

在您的主sass文件中，包括以下内容：

<div id="other-div"><h1>Test other-div</h1></div>
<div id="app"><h1>Test app</h1></div>

@import 'custom';   
#app {
     @extend %h1;
}

---

您需要编辑custom.scss文件

将此添加到第一行

#app{

这在文件的最后一行

}

---

然后导入它。

您可以使用子选择器，无需使用sass

#app>h1{color:red；}

或者您可以像那样使用sass

#app{&>h1{color:red；}

谢谢您的回答。我已经尝试过嵌套导入，问题是导入中的某些样式被主页样式覆盖。所以我在一些公司工作part@Bartosz：尝试第二种（可选）解决方案，该解决方案肯定会奏效。