Black and white photograph of the loops of a wooden rollercoaster

Unlike scripting languages such as JavaScript and , 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.

Photograph of a container ship taken from the bow, with a wake behind streaming to the horizon

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:

  1. @import is only valid at the start of a stylesheet (i.e. directly after the @charset), and can’t be used later.
  2. More importantly, traditional @import always 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.