Stylesheets for a website are often written from a single “ideal” state (usually mobile-first or desktop), which is then added to and adjusted with a series of @media queries:
Learning Sass with CodePen, Part 7: Loops
Unlike scripting languages such as JavaScript and PHP, vanilla CSS cannot loop back on itself. The lack of this feature often means that portions of your site stylesheets must be written out in long, tedious routines that force you to cut, paste, and alter CSS declarations, only to have to change them all again when a detail in the markup or CSS changes.
Thankfully, Sass does have loops, which can generate a great number of lines in your stylesheet almost instantly.
Learning Sass with CodePen, Part Six: Partials and @import
The inevitable rule of web development is that stylesheets get longer and harder to manage as a site grows. CSS has a single, traditional solution to this: @import, used to reference outside files from a stylesheet. You’ll most likely have seen @import used to embed a web font, but the same method can be employed to draw any valid CSS resource into a stylesheet.
However, standard @import has two major disadvantages in CSS:
@importis only valid at the start of a stylesheet (i.e. directly after the@charset), and can’t be used later.- More importantly, traditional
@importalways remains a link to an external resource. This means that the stylesheet will be forced to request and download separate files, slowing the site’s time-to-glass through latency and stacked requests.
Thankfully, Sass provides a better solution.