Kevin Powell - Community•11mo ago

can you defer a sass media query

I am trying to do what I saw KP do in his folder setup, however, my media query goes a head of my actual code. I have separated it and I have to use the @use on the top meaning when it imports the query for some reason haves to go on top in the css file.

@media (max-width: 650px) {
  header {
    background: blue;
    padding: 1rem;
    z-index: 100;
  }
}
header {
  background-color: rgb(19, 22, 26);
  position: fixed;
  width: 100%;
  top: 0;
}

@media (max-width: 650px) {
  header {
    background: blue;
    padding: 1rem;
    z-index: 100;
  }
}
header {
  background-color: rgb(19, 22, 26);
  position: fixed;
  width: 100%;
  top: 0;
}

Is there a way I can make it that the media query actually goes after this using partials in scss ?

22 Replies

althepal78OP•11mo ago

The funny thing is that some things work like this like the padding and some things do not work at all, for instance the padding worked but the bg-color did not

b1mind•11mo ago

might be cause you are changing shorthand vs direct declaration? Try using the same for both 😉 I would use background-color since its the only thing you are changing.

althepal78OP•11mo ago

I did that before and why I did the shorthand to see if it changed it

b1mind•11mo ago

open dev tools and look i'd also change it from a rgb to a rgb for consistency, not to solve the problem but my ocd

althepal78OP•11mo ago

okay let me see lmao I have ocd in things like this as well but yeah I just literally changed it from background-color to background lol The issue is that the media query is before the header element so I was trying to defer it

b1mind•11mo ago

you don't defer things is CSS you have hierarchy So put your media query below it probably (I nest media queries in sass mostly)

header {
  background-color: rgb(19, 22, 26);
  position: fixed;
  width: 100%;
  top: 0;
  @media (max-width: 650px) {
    background: rgb(0, 0, 255);
    padding: 1rem;
    z-index: 100;
  }
}

header {
  background-color: rgb(19, 22, 26);
  position: fixed;
  width: 100%;
  top: 0;
  @media (max-width: 650px) {
    background: rgb(0, 0, 255);
    padding: 1rem;
    z-index: 100;
  }
}

althepal78OP•11mo ago

Yes I was thinking about that but I was trying to put a whole _queries.scss so I can do it for different screen widths but noooo it is taking mucking it up for me lmao so I was trying to make a partial lol

b1mind•11mo ago

yea I'm big on having it in the same place as it needs it that way I'm not tracking it down in another file, def a preference thing though. I just feel nesting media queries keeps the concerns in the same spot. You can use the @media rules/mixin or just use sass variables to include too. that way if you need to change a breakpoint value you can do it in one spot. I don't have a sexy mixin so I just use variables xD

Mannix•11mo ago

from what i understand you gonna need to make your main code into a partial and load it with use before _queries.scss

b1mind•11mo ago

yea same hierarchy applies

althepal78OP•11mo ago

so I need to take the queries out of the header partial and put it in the in as styles.scss also if I have a position fixed bottom why is it making seem like the height is just got bigger lol

Mannix•11mo ago

you want your styles.scss to only have partials and order them in the way you want them to be loaded

althepal78OP•11mo ago

yes that is what I am doing 🙂

@use './sections/' as *;
@use './components/queries' as *;

@use './sections/' as *;
@use './components/queries' as *;

I would put the whole folder as to use all but I don't need that in the components just the queries I guess I am not understanding position fixed either because I put bottom: 0; and it just made the it have a height to the whole screen

Mannix•11mo ago

do you have top also declared there?

althepal78OP•11mo ago

yes but not in the mixin, it is declared before the mixin i mean media query oh I see it does not change it I don't know why

Mannix•11mo ago

you can't have both if you want it to stick to the bottom

althepal78OP•11mo ago

althepal78OP•11mo ago

like why can't it change out if I changed it out in a media query lol I did not know that it did this confusing as hel

Mannix•11mo ago

those are two separate properties you can add top:unset; in your media query

althepal78OP•11mo ago

oh I was like how did you do that but I couldn't remember that I seen tha tbefore let me see 🙂 well that solved it the unset and the having deleting it from my header partial and just adding the partial to my styles.scss thank you very much you figured it out for me lol

Mannix•11mo ago

althepal78OP•11mo ago

the funny thing is that I didn't want the color to change but because of other properties not working I was like wth let me check lol I had an idea it might be that but in my head since I was tired I couldn't figure it out until i asked you guys lol is that best practice to put the media query in the header after you finish what you was coding

Gaming

Programming

can you defer a sass media query