使用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
  }
}

这是一种灵活的方法。