如何在 sass 中扩展媒体查询

Question

我有媒体查询要扩展

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

我想扩展我搜索到的媒体查询，但没有找到任何关闭。我知道以下内容是错误的

 @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 了解更多信息。