SASS:使用SASS编写嵌套CSS是一个很好的实践吗？

Question

在sass中，可以编写这样的嵌套css：

​

#A{
  .InnerContainerAA{
    p{
      font-size: 20px;
    }
  }
  .InnerContainerAB{
    height: 30px;
    width: 150px;
    font-size: 15px;
  }
}

<div id="A">
  <div class="InnerContainerAA">
    <p>Hello World</p>
  </div>
  <div class="InnerContainerAB">
    <button>Hover to change color</button>
  </div>
</div>

​

这样，HTML和CSS(SASS)都遵循相同的格式。

然而，

1. 是一个很好的实践吗？(如果不是，请解释一下)
2. 以这种嵌套的方式写作对性能有什么影响？

Answer 1

这样做是一个很好的实践吗？(如否，请解释)

是的，这是scss的写法。

以这种嵌套的方式写作对性能的影响是什么？

没有，因为scss编译器会将它编译成普通的css，并且浏览器将使用它。