如何在 SCSS 中使用 Mixin 覆盖引用父选择器

Posted 2023-03-06

【中文标题】如何在 SCSS 中使用 Mixin 覆盖引用父选择器

【英文标题】：How to overwrite Referencing Parent Selector using Mixin in SCSS

【发布时间】：2019-01-08 09:39:57

【问题描述】：

我有一个常用的组件，它的scss是这样的：

.component 
    margin-right: 12px;

    &.specified-use-case 
        margin-right: 30px;

        &:nth-child(odd) 
            margin-right: 70px
        
    

现在我希望移动视图中的所有内容都具有相同的样式

.component 
    margin-right: 12px;

    // some predefined mixin
    @include viewport(mobile) 
        margin-right: 0px;
        margin-bottom: 14px;
    

    &.specified-use-case 
        margin-right: 30px;

        &:nth-child(odd) 
            margin-right: 70px
        
    

但这不能改变移动视图中“指定用例”的样式。为了做到这一点，我必须

.component 
    margin-right: 12px;

    // some predefined mixin
    @include viewport(mobile) 
        margin-right: 0px;
        margin-bottom: 14px;
    

    &.specified-use-case 
        margin-right: 30px;

        @include viewport(mobile) 
            margin-right: 0px;
            margin-bottom: 14px;
        

        &:nth-child(odd) 
            margin-right: 70px

            @include viewport(mobile) 
                margin-right: 0px;
                margin-bottom: 14px;
            
        
    

这对我来说似乎不正确。有没有更好的方法来定义移动视图 css 一次？

【参考方案1】：

根据CSS' specificity rules（试试this calculator），很遗憾，您需要重复一遍。您的 SCSS 解释器所做的只是将您编写的内容编译为标准 CSS，看起来类似于：

.component 
 margin-right:12px

@media (max-width:768px) 
 .component 
  margin-right:0px;
  margin-bottom:14px
 

.component.specified-use-case 
 margin-right:30px

@media (max-width:768px) 
 .component.specified-use-case 
  margin-right:0px;
  margin-bottom:14px
 

.component.specified-use-case:nth-child(odd) 
 margin-right:70px

@media (max-width:768px) 
 .component.specified-use-case:nth-child(odd) 
  margin-right:0px;
  margin-bottom:14px
 

如您所见，您将在每个类被声明后用@media 规则集覆盖它。而且由于我非常支持永远不要使用!important（因为你会打开一个潘多拉魔盒），所以缩短 SCSS 的唯一方法是：

.component 
    margin-right: 12px;

    // some predefined mixin
    @include viewport(mobile) 
        margin-right: 0px;
        margin-bottom: 14px;  // only need to define margin-bottom once, here.
    

    &.specified-use-case 
        margin-right: 30px;

        @include viewport(mobile) 
            margin-right: 0px;
            //margin-bottom: 14px;, remove this
        

        &:nth-child(odd) 
            margin-right: 70px

            @include viewport(mobile) 
                margin-right: 0px;
                //margin-bottom: 14px;, remove this
            
        
    

希望这会有所帮助！

【参考方案2】：

您可以将规则放在媒体查询中：

@include viewport(mobile) 
    margin-right: 0px;
    margin-bottom: 14px;

    &.specified-use-case 
        margin-right: 0px;
        margin-bottom: 14px;
    

【讨论】：

谢谢，但这仍然无法阻止重复相同的代码，我需要另一个伪类 nth-child 的选择器

【参考方案3】：

似乎 sass 是错误的，因为您在断点上方指定了边距，试试这个：

.component 
    margin-right: 12px;

&.specified-use-case 
    margin-right: 30px;

    &:nth-child(odd) 
        margin-right: 70px
    
  
 // some predefined mixin
@include viewport(mobile) 
    margin-right: 0px;
    margin-bottom: 14px;