vue.jsvuetify.js

How to do breakpoints in scss file with vuetify?

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

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

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

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

Solution

  • You can do it in scss:

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

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

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