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 sharedStyles{ 
    //shared nested styles go here 
} 

.parentA{ 
    margin-top:74px; 
    @include sharedStyles; 
} 

.parentB{ 
    margin-top: 50px; 
    @include sharedStyles; 
} 

这里是图解概念的要点：

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

我建议使用sassmeister快速原型：

https://www.sassmeister.com

Answer 2

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

%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; 
}