如何使用Vuetify在SCSS文件中进行断点

Question

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

例如，Bootstrap使我能够在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>