How to use sass in Vue for mobile layout?

Question

Sass

You need to make the layout of the Vue JS application for mobile devices. Screens will be 6-7.
I usually do all the layout for each component in the component itself in the style section

. But somehow it turns out to be a very large canvas if you do all the layout for all resolutions. Tired of scrolling.
So I thought, is it possible to somehow make the layout separately for mobile into separate files, and then somehow import them into the component so that only the component can see its classes from the imported files?

I'll be using the scss syntax for sass

Can you show a couple of examples with single files?

An example of the fact that all styles for mobile are described in one vue component

@media screen and (max-width: 1366px) and (max-height: 768px) {
  .nav-image {
    width: 50%;
  }
}

@media screen and (max-width: 1200px) and (max-height: 720px) {
  .instagram {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 900px) {
  .navigation {
    transform: translateX(calc(-1 * var(--nav-width)));
  }
}

Answer 1

can be put into separate files

img