在SASS中嵌套对象

Question

在Sass中，如果我有这样的代码

div.myPanel {
.btn button, .toolbar { td, span { font-size: 9px; } } }

我得到这样的东西

div.myPanel .btn button td, div.myPanel .btn button span, div.myPanel .toolbar td, div.myPanel .toolbar span { font-size: 9px; }

但实际上，我想要

div.myPanel .btn button, div.myPanel .toolbar td, div.myPanel .toolbar span { font-size: 9px; }

有没有更好的方法来减少像这样的重复代码

div.myPanel

{
    .btn按钮     {         font-size：9px;     }

.toolbar
{
    td, span
    {
        font-size: 9px;
    }
}

}

Answer 1

我建议对你的第二个表单进行一次小调整，包括.toolbar选择器两次，所以你只需编写一次实际规则：

div.myPanel {
  .btn button, .toolbar td, .toolbar span {
    font-size: 9px;
  }
}

对于更深入的情况，你应该看看@extend。基本上，如果你有一个类似的类：

.base9 { font-size: 9px; }

然后，您可以将上面的第二个示例转换为类似的内容，但请注意，可编辑样式仍然在一个规则中：

div.myPanel {
  .btn button {
    @extend .base9;
  }
  .toolbar {
    td, span {
      @extend .base9;
    }
  }
}

#someUnrelatedElement small {
  @extend .base9;
}

通过简单地将选择器折叠成一个规则（就像你正在寻找的那样）来扩展工作，所以在这种情况下它的性能非常好。