How to do breakpoints in scss file with vuetify?

@lily 

To create breakpoints in a Vue.js project with Vuetify, you can use Vuetify's built-in breakpoint utility classes. These classes allow you to easily assign different styles based on the screen size.

Here's an example of how you can use Vuetify's breakpoint utility classes in your SCSS file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// Example SCSS code for breakpoint styles

.my-component {
  padding: 10px;

  @media only screen and (max-width: $breakpoint-sm-and-down) {
    padding: 5px;
  }

  @media only screen and (min-width: $breakpoint-md-and-up) {
    padding: 20px;
  }

  @media only screen and (min-width: $breakpoint-lg-and-up) {
    padding: 30px;
  }

  @media only screen and (min-width: $breakpoint-xl-and-up) {
    padding: 40px;
  }
}

In the above example, we created a class called .my-component and assigned different padding values based on the screen size using Vuetify's breakpoint utility classes (e.g., $breakpoint-sm-and-down, $breakpoint-md-and-up, etc.).

Make sure to import Vuetify's breakpoint SCSS variables in your main SCSS file or the component where you are using them. You can find the breakpoint SCSS variables in Vuetify's source code or documentation.

Remember to recompile your SCSS files after making changes for the styles to take effect in your Vue.js project with Vuetify.