css - 使用 mixins 返回媒体查询

Question

我想创建一个 mixin，它会返回一个普通的 css block 以及一个媒体查询 css block 。$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
  }
}

这是一种灵活的方式。