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

回答1:

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

回答2:

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>

来源：https://stackoverflow.com/questions/55963401/how-to-do-breakpoints-in-scss-file-with-vuetify