我想创建一个 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
。
这可能吗?最接近的解决方案可能是什么?
谢谢!
最佳答案
@mixin breakpoint($point) {
@media (min-width: $point) { @content; }
}
.app {
width: 100vw/2; // for mobile devices
@include breakpoint(992px){
width: 33vw/2; // for desktop since
}
}
这是一种灵活的方式。
关于css - 使用 mixins 返回媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56830166/