Sass for Web Designers
When using Sass, it’s easy to forget what the compiled stylesheet will ultimately look like—make sure to keep tabs on how Sass outputs your work.
Sass can move at a quicker pace, implementing features that don’t yet exist in the CSS spec. If these prove successful enough, they could be folded into the standard.
In Sass, you can nest media queries inside the original declaration, and they will “bubble up” into their own separate declarations when the stylesheet is compiled. It’s wonderful. Susan Robertson: Hmmm, I like this idea, but worry about extra bloat with repeating the media query over and over again for just one selector.
Shared styles can be abstracted into mixins, and you’ll still have the ability to override or augment those styles with additional rules. Powerful stuff!
Instead of littering the markup with extra classes to handle those small exceptions, we can use Sass’s @extend function to “chain together” styles that are shared amongst multiple selectors. Additionally, we can then add extra overriding rules to make a new unique style without duplicating the shared styles.
Rather than typing the same rules over and over again in various declarations, you can use mixins to define a group of styles just once and refer to it anytime those styles are needed.
For a large stylesheet that uses responsive design with frequent media queries for multiple viewports, this would reduce the compiled CSS file quite a bit. Unfortunately, Sass doesn’t (yet?) support this “aggregated media query bubbling,”
Placeholder selectors are especially helpful in creating blocks of styles for design patterns that may or may not be used
Where a mixin will write the same rules in each declaration it’s called from, @extend will create multiple, comma-separated selectors for shared styles. It’s good to keep that difference in mind when you’re debating which to use.
Specify arguments with variables inside parentheses when defining the mixin:
You can start to see how flexible mixins can be. Through arguments, consistently-shared rules can sit alongside those that differ slightly.