如何使用 vuetify 在 scss 文件中做断点？

Question

如何在我的 vuetify 应用程序中但在 scss 文件中使用媒体查询断点？

例如引导程序使我能够在 scss 文件中执行此操作：

@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

vuetify 中的等价物是什么？我在 vuetify 网站上找不到任何文档

Answer 1

你可以在 scss 中做到：

@import '~vuetify/src/styles/settings/_variables';

@media #{map-get($display-breakpoints, 'sm-and-down')} {
    .custom-class {
        display: block;
    }
}

...你是对的，关于 vuetify 中断点的文档很少

Answer 2

我通过附加与断点相对应的类名来实现这一点，该类名在$vuetify.breakpoint对象中可用。这不是一个完美的解决方案，但我只需要在我的应用程序中为一个元素执行此操作。希望能帮助到你！

例子：

<item :class="($vuetify.breakpoint.smAndDown) ? 'sm' : ''"></item>
...
<style scoped lang="scss">
#item{
    right: 130px;
    &.sm{
        right: 35px;
    }
}
</style>