How to do breakpoints in scss file with vuetify?

Question

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

Answer 1

I achieved this by attaching a class name corresponding to the breakpoint, which is available in the $vuetify.breakpoint object. Not a perfect solution, but I only needed to do it for once element in my app. Hope it helps!

Example:

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

Answer 2

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