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

问题描述

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

How to use media query breakpoints in my vuetify application but in scss file?

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

For example bootstrap enable me to do that in scss file:

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

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

what is the equivalent in vuetify? I can't find any documention in vuetify website

推荐答案

你可以在 scss 中做到:

You can do it in scss:

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

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

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

... and you're right there is very little docs regarding breakpoints within vuetify

这篇关于如何使用 vuetify 在 scss 文件中做断点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！