使用 mixins 返回媒体查询

Question

我想创建一个 mixin，它会返回一个普通的 css 块以及一个媒体查询 css 块。 $base-width 将是 100vw 用于移动设备，33vw 用于台式机。

示例用法：

.app {
    @include responsive {
        width: $base-width/2;
    }
}

它基本上会编译为：

.app {
  width: 100vw/2;     // for mobile devices
  
  @media screen and (min-width: 992px) {
    width: 33vw/2;    // for desktop since $base-width: 33vw;
  }
}

左边的属性可以是任何东西，并不总是width。

有可能吗？什么可能是最接近的解决方案？

谢谢！

Answer 1

 @mixin breakpoint($point) {
    @media (min-width: $point) { @content; } 
}

.app {
  width: 100vw/2;     // for mobile devices
  @include breakpoint(992px){
     width: 33vw/2; // for desktop since
  }
}

这是一种灵活的方式。