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

如何在Sass中扩展媒体查询

1 个答案: