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

Question

嵌套以下CSS的“最好的Sass”方法是什么？

.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

我相信这将是最好的：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;