One way to writer DRYer code is to separate concerns and keep related code in separate files. This allows you to maintain code in one file as opposed to maintaining the same code over several or many files.
Category: CSS
Sass: The @media Directive
One of the cornerstones of responsive design is the media query. The @media directive provides a mechanism for serving different styles to different devices with different characteristics. Sass both supports and extends the @media rule.
Sass: @-Rules and Directives
While CSS isn’t a programming language, it includes some programming-like features. For example @-rules provide a simple control mechanism for running one block of code instead of another. Sass as you would guess extends these rules and provides a few of its own.
How To Use Sass Variables
Think of all the times you might add the same color to different elements or classes in your CSS file and then think of all the fun you have changing everything when you decide another color would work better. Wouldn’t you prefer to make the change once and have the rest update automatically?
The Pros and Cons of Nesting Your Sass Code
Nesting can be a good way to organize your Sass code. It can also lead to specificity problems if you nest too deeply. You don’t have to look to far to find people who’ll tell you how wonderful nesting is or how the universe might cave in on itself if you attempt to nest your code.
The truth as usual is somewhere in between the extremes.