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.
@import has two major disadvantages in CSS:
@import is only valid at the start of a stylesheet (i.e. directly after the
@charset), and can’t be used later.
- 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.
Read more about Sass Partials