如何在Sass中嵌套一个带有类的元素内部的标题？

Question

问题

.center h1{ }和h1.center之间的区别是什么？这会影响样式结果，嵌套时应该考虑什么？

 .center {
     text-align: left;
 }
 .center h1 {
     margin-bottom: 10px;
 } 

Answer 1

第二条规则会对h1内的所有.center进行设置，而不仅仅是直接子项。例如：

<div class="center">
    <h1>this one</h1>
</div>

OR

<div class="center">
    <div class="another div">      
        <h1>this one</h1>
    </div>
</div>

但它是普通的CSS，而不是SASS语法（但它也属于SASS）。

在SASS中它应该是：

.center {
    text-align: left;

    h1 {
        margin-bottom: 10px;
    }
}

Answer 2

第二个选择器与中心功能无关。它只是给一个元素中的每个h1赋予一个＆＃39; center＆＃39;在底部划一个边距，即10px。