如何在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以获取更多信息。