SCSS / SASS - 如何为嵌套CSS指定两个有效父项

Question

问题：使用SCSS，我们可以指定两个不同的.main选择器吗？假设我想要另一个margin-top: 50px，同时继承所有其他条件

我从其他人那里继承了一些SCSS。我有以下SCSS结构：

.main {
  margin-top: 74px;

  ul.tabs {
    position: relative;

    li.tab {
     /*The rest of nested structure*/
             }
          }
       }

它继续为许多层嵌套（不幸）。

我有一些其他选项（将结构分成两部分），这是一个简单的修复。只是好奇是否有更好的东西。

谢谢！

Answer 1

你应该使用mixin：

+

这是一个说明这个概念的要点：

https://gist.github.com/Ryan-Haines/ba10888d0828d394851d3da6063f70bb

我建议使用sassmeister进行快速原型制作：

https://www.sassmeister.com

Answer 2

如果使用占位符，只要一个选择器不在媒体查询中，它就应该在CSS中将它们组合在一起。即

%mainStyles {
        border: 1px solid black;
}

.main1 {
    margin-top: 75px;
    @extend %mainStyles;
}

.main2 {
      margin-top: 50px;
      @extend %mainStyles;
}

应该生成

.main1, .main2 {
     border: 1px solid black;
}
.main1 {
    margin-top: 75px;
}

.main2 {
      margin-top: 50px;
}