2

I have a SCSS compiler question for ye!

I'm currently refactoring my first project to use SCSS (and a more structured stylesheet filing system, i.e. split in partials, modules etc.) to get to learn more about the SCSS approach, but I've encountered an issue with the compiler which is driving me stark ravin mad.

Here's a sample of code that gets messed up by the compiler:

#navBar {
.desktopMenu {
 .dropdownExcluder {
    display: none;
    }
 }
}

The above code tells the browser not to display the html element I created to be the display for desktop view. Then using a media query I set the display to flex for that given element at >=620px:

@media screen and (min-width: 620px) {
 #navBar {
      .desktopMenu {
         .dropdownExcluder {
            display: flex;
        }
      }
  }
}

In both examples I've used nesting to nest a class within a class within an ID selector. But with the second example the code is then nested again within the media query. The problem with the compiler is that the first example is rendered into CSS as:

#navBar .dropdownExcluder .desktopMenu {
 display: none;
}

and the second example is rendered into CSS as :

@media screen and (min-width: 620px) {
 #navBar .desktopMenu {
   display: flex;
 }
}

So as you will see the compiler has excluded (for the media query) the .dropdownExcluder class from the selector. What it should read is:

@media screen and (min-width: 620px) {
 #navBar .dropdownExcluder .desktopMenu {
   display: flex;
 }
}

The problem with the compiler working this way is that because the specificity of the selector within the media query is reduced (the specifity is rendered less specific than that of the same selector outside of the media query) then despite the media query the original selector overrides the code with the media query and even though I can see the display: flex has been set in the browser it is overridden by display:none from the original selector.

Has anyone experience issues like this before? This stackoverflow question helped my figure out the specificity issue Media Query Styles Not Overriding Original Styles but is there a way to force the compiler for 'strict compilation' or am I just making up terms?

Olivander
  • 33
  • 4
  • Never have I ever seen something like this. It's really weird. In fact, I suspect the problem is somewhere else; things like having another similar mediaquery somewhere, or something like that – Jonas Grumann May 09 '19 at 12:48
  • What SCSS compiler do you use? None of the compilers i have tested have this issue. – Deckerz May 09 '19 at 12:52
  • That's not a specificity problem, the scss and the compiled style are two whole different selectors. The problem is elsewhere for sure – Christian Vincenzo Traina May 09 '19 at 12:53
  • 1
    @Deckerz, just regular SASS using the sass --watch style.scss:style.css – Olivander May 09 '19 at 12:58
  • @CristianTraìna, I'm just beginning the scss refactor of an old project that used vanilla css and this is the first media query I've written so it's not being interfered with by another media query. The specificity is definitely an issue because if I rewrite the code in vanilla css with the specificity I suggested it should have the styling issue is fixed. They are rewritten as two separate selectors by sass but they should come out the same. The issue of specificity you can find here: https://stackoverflow.com/questions/19038240/media-query-styles-not-overriding-original-styles – Olivander May 09 '19 at 13:00
  • 1
    its 100% an issue with the scss file as a whole. As those snippets work standalone. Check for extra `}` or something – Deckerz May 09 '19 at 13:02
  • This is either a bug in the compiler _(unlikely, especially for something that should be pretty basic)_ or you have an error elsewhere in your file. Perhaps try using stylelint or another SASS/SCSS linter to double-check yourself. – Chris Barr May 09 '19 at 13:08

1 Answers1

0

Try using this way

#navBar {
    .desktopMenu {
      @media (min-width: 620px) {
         .dropdownExcluder {
             display: flex
         }
      }
   }  
}

for more info see nesting in SASS

MadaniTech
  • 11
  • 7
  • 1
    that worked perfectly! The compiler wrote the SCSS with the same specificity for both the original selector and the selector within the media query. Now for >= 620px screen the media query is overriding the original selector. Thanks a million – Olivander May 09 '19 at 13:18
  • 1
    You are most welcome. If it useful for you then vote it. – MadaniTech May 09 '19 at 17:41