css - 如何在 sass 中扩展媒体查询

Question

我有媒体查询要扩展

@media (min-width: 576px)
.modal-dialog {
max-width: 500px;
margin: 14% auto;    
}

我想扩展媒体查询，我用 goolged 发现没有什么接近的。我知道以下是错误的

 @media (min-width: 576px)
   .modal-dialog
  {
    @extend @media (min-width: 576px)
       .modal-dialog{
        max-width:800px
       }
  }

我不知道这个方法有没有人知道。

欢迎任何帮助

更新代码

 @mixin modal-dialog-mixin() {
max-width: 800px;  
 }

 @media ( min-width : 576px ){
@extend .modal-dialog;    //error here
@include modal-dialog-mixin();
 }

在 @extend .modal-dialog;

处抛出它不起作用

Answer 1

我们正在寻找的答案是@mixin。使用 @mixin 我们可以很容易地导入我们想要的所有规则。我们要做的是将我们想要扩展的类的代码放在@mixin 中，而不是放在类本身中。然后媒体查询中的类和部分都将导入@mixin 功能。

@mixin modal-dialog-mixin() {
   max-width: 500px;
   margin: 14% auto;   
   }


 @media (max-width: 576px) {
   button {
     @include modal-dialog-mixin();
   }
 }

你也可以看看这个link了解更多信息。