How to do breakpoints in scss file with Vue Vuetify?

To use breakpoints in a SCSS file with Vue.js and Vuetify, you can leverage Vuetify’s built-in breakpoint mixins.

Vuetify provides a set of SCSS mixins that correspond to its breakpoints.

These mixins allow you to conditionally apply styles based on the screen size.

Here’s an example of how you can use breakpoints in a SCSS file with Vue.js and Vuetify:

// Import Vuetify SCSS variables and mixins
@import '~vuetify/src/styles/styles.sass';

// Your custom SCSS styles
.my-component {
  background-color: red;

  // Apply styles only on screens smaller than the "md" breakpoint
  @include breakpoint(md-and-down) {
    background-color: blue;
  }

  // Apply styles only on screens larger than the "md" breakpoint
  @include breakpoint(md-and-up) {
    background-color: green;
  }

  // Apply styles only on screens between "sm" and "lg" breakpoints
  @include breakpoint(sm-and-up, lg-and-down) {
    background-color: yellow;
  }
}

In this example we import Vuetify’s SCSS variables and mixins.

We define a class .my-component and set its background color to red.

We use Vuetify’s breakpoint mixin to apply styles based on different breakpoints.

We can specify breakpoints using the predefined breakpoint names (e.g., md, lg) along with the specified conditions (-and-up, -and-down, -only).

Remember to make sure that you have Vuetify and its SCSS styles set up in your Vue.js project for this to work.

Additionally, ensure that your Vue components use SCSS rather than plain CSS by configuring your build setup to support SCSS preprocessing.

We can do this by installing the necessary dependencies (like sass-loader and node-sass) and configuring your webpack or Vue CLI setup accordingly.