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.

Sass @import

Sass imports use partials: fragments of CSS. A simple example would be a minimal CSS reset:

html {
	box-sizing: border-box;
}
body {
	margin: 0;
	box-sizing: inherit;
}
figcaption, ul, ol, dl {
	margin: 0;
	padding: 0;
}

This fragment can be as large or as small as you like: what matters is the filename you give it, and where that file is saved. There are three conditions for naming Sass partial files:

1. The filename must start with an underscore.
2. The filename should have an extension of .scss, even if it only uses plain CSS.
3. The file must be saved beside your root styleseet. (It’s possible to place partials in subfolders, but I will leave that for an advanced article).

For example, let’s imagine we save the code we’ve written so far as a file named _reset.scss. We’ll save it in the same location as our “base”, Sass-infused stylesheet, styles.scss. To import _reset.scss into styles.scss, turn to the latter file and add this at the top of the document:

@import 'reset';
// the rest of your stylesheet goes here

Note that we don’t add the underscore or the .scss extension for _reset.scss when referencing it via Sass @import: given the root name of the file, Sass is smart enough to know what we’re talking about.

Sass compiles the base stylesheet with any @import files: the result is a single stylesheet that directly incorporates the code of all the partials inside the main CSS file, eliminating any dependence or slowdown when the stylesheet loads. This means that you can develop your CSS in modules, adding them to the central stylesheet where you need them and keeping your code clean and organized.

Import Everywhere

One of the nice features of Sass-powered @import is that we can use it anywhere in our main stylesheet: at the start, at the end, or anywhere in between. We can also attach conditions to an @import. For instance, if we’ve developed a site using mobile-first methodology, we might have a partial containing styles for browser viewports 720 pixels and wider. A simple version of that partial stylesheet might be the following:

body { margin: 1rem; }

I’ll call this file _720px.scss, and save it beside my main stylesheet. In that main stylesheet, I’ll import this partial and place an @media query around it:

@media all and (min-width: 720px) {
    @import '720px';
}

This will embed the styles of _720px.scss inside the condition of the media query. This can be further enhanced with mixins, a Sass feature I will talk about in a future article.

Sass Import In CodePen

You may have noticed that, unlike the rest of the articles in this series, I haven’t directly addressed CodePen so far. This is due to the fact that @import explicitly references external files… and CodePen does not host files by default, only code. However, it does host images, partials, scripts and short videos with a Pro account, which you can currently try for free for 14 days. If you’re interested, I’ve left a simple CodePen @import example using my Pro account that you could use as a starting example.

Photograph by Lou Vest, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/vEeVYW