Sass - 用一些样式包装第二版bootstrap

Question

感谢您阅读本文。

我在网站上有1个元素，让我们看起来像这样：

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

我想div＃app，只有自己的样式，不适用于网站的其他部分。所以我试着用sass做这样的事情：

#app {
    @import "custom.scss";    
}

（假设自定义css有h1 {color：red}）

问题： custom.scss中的样式也适用于＃other-div。我如何分开这两个元素？所以网站其他部分的样式不应该适用于#app，#app中的元素样式应该不适用于其他网站

谢谢！

Answer 1

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

或者，您可以将custom.scss中的样式括在占位符选择器中，如下所示：

%h1 {
   color: red
}

在你的主sass文件中，包括它：

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

Answer 2

您需要编辑custom.scss文件。

在第一行添加此内容

#app{

，这是在文件的最后一行。

}

然后导入它。

Answer 3

你可以使用子选择器，不需要使用sass #app > h1 { color: red; }，或者你可以像#app { & > h1 { color: red; } }那样使用sass。