Learn SCSS From The Source

When I’m trying to style something using a Mobile First approach, I tend to under-think my SCSS. I don’t know if I just get lazy sometimes or I just get tired of what I’m working on; It doesn’t always leave me with the best styles.

The code may get the job done, but it’s convoluted and there’s lot’s of duplicated styles and overrides.

Today I was trying to mimic Bootstrap 4’s .collapse class that hides any element that doesn’t also have the .show class, but also show it on larger devices.

That code would work fine, but sometimes I like to check in the original source to see how the framework does it. There’s a lot to learn from framework maintainers.

This a much better way to write the same result. .collapse should only hide elements when it doesn’t also have a class of .show

Sometimes it’s better to write out what you need in a few words, think about what you’re really trying to achieve, then write it. You might end up with less code. And try to read as much source code as you can, I find little tid-bits like this all the time.