Media queries within nesting - Sass

Asked

Viewed 145 times

-1

I have a question, I am creating an application in React, so I am using SASS.

But my doubt is related to SASS, if it is a good practice I insert media querie inside my css block.

Example I’m doing now, and I’m having doubts whether it’s good practice or not. Media queries dentro do nesting I used this to avoid opening a new media queries outside the scope of my nesting...

The question is

Is this way bad practice? Why?

css react sass

1 answer

0

SCSS does not run, SCSS/SASS is converted to CSS, and yes, writing a media query within SCSS will be converted to CSS correctly, the SCSS language is not a usage language ("executable") and yes to facilitate code development and repetitions and in the end it is converted to CSS, something like:

ul#menu
{
  li {
    text-align: left;

    @media screen and (max-width: 500px)
    {
      text-align: center;
    }
  }
}

Is converted into:

ul#menu li {
  text-align: left;
}
@media screen and (max-width: 500px) {
  ul#menu li {
    text-align: center;
  }
}

Even in the official DOC itself has examples: https://sass-lang.com/documentation/file.SAS_REFERENCE.html#media

If you have doubts that something will or will not work you can install SCSS outside of React (React as well as Ionic already have with the SCSS compiler internally) or use an online tool:

Browser other questions tagged css react sass

You are not signed in. Login or sign up in order to post.