Skip to content

Instantly share code, notes, and snippets.

@yayMark

yayMark/DebuggingSCSS.md

Created March 22, 2018 07:02
Show Gist options
  • Save yayMark/f44e3670f170c8cdcdcc734315a48348 to your computer and use it in GitHub Desktop.
Save yayMark/f44e3670f170c8cdcdcc734315a48348 to your computer and use it in GitHub Desktop.
Download ZIP
Debugging SCSS
Raw
DebuggingSCSS.md

If your SCSS rule isn't being applied, it's likely to be a mistake in the nesting of the rule.

  1. Check the CSS file for how the rule has been generated, e.g. .locations-listing .listings > ARTICLE .m-chapels .location-details
  2. Go to the HTML and copy the selector for where you're expecting it to be applied. This will be slightly different to how you've written. e.g. #main > section.locations-listing > div.wrapper.listings > article:nth-child(12) > div.location-details
  3. Comparing the examples, I see that .m-chapels is applied to the article element. It is not a descendent.
  4. Fix the rule in your SCSS, e.g. &.m-chapels .location-details instead of .m-chapels .location-details
  5. Profit!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment