时间戳

首页 > 解决方案 > 如何在 sass 中扩展媒体查询

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

问题描述

我有媒体查询要扩展

@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;

标签： csssassbootstrap-4media-queriesbootstrap-modal

解决方案

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

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


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

您还可以查看此链接以获取更多信息。

推荐阅读