最佳实践:在Sass中嵌套给定的CSS

Question

什么是“最好的Sass”方式来嵌套下面的CSS？

.summary-features a,
.summary-description a,
.price .element_prijs1 {
  font-weight: $font-weight-bold;
}

Answer 1

将其保留为，以避免不必要的复杂性和/或冗余。没有‘最佳’嵌套，但只有‘正确’和‘不正确’的语义。

在您的示例中，您可以强制嵌套，如Neelam和Jeroen所描述的那样，但是这会带来冗余，因此更糟糕的可维护性。另一种选择，仅仅是用语义演示事物，是避免冗余，并这样做：

.summary-features,
.summary-description,
.price {
  a, .element_prijs1 {
    font-weight: $font-weight-bold;
  }
}

不具有与您的CSS片段相同的语义。这样，a元素在.price中也将变得粗体，.element_prijs1将在.summary-features和.summary-description中得到。因此，再次:只需保留它的现状，不要将嵌套本身作为目的。它仍然是有效的Sass代码。

Answer 2

我绝不是一个无所不包的专家，然而这是嵌套你的sass选择器的一种方法：

.summary-features,
.summary-description {
   a {
      font-weight: $font-weight-bold;
   }
}

.price {
   .element_prijs1 {
     font-weight: $font-weight-bold;
   }
}

Answer 3

我相信这将是最好的：

​

.summary-features, .summary-description {
    a {
        font-weight: $font-weight-bold;   
    }
}
.price {
    .element_prijs1 {
        font-weight: $font-weight-bold
    }
}

​