Sass Partials

How to use Sass partials to modularize your CSS code.

Sass allows you to create partial Sass files that you can include in other Sass files. This enables you to reference information in another file. This helps you to modularize your CSS so that it's easier to maintain.

Example

For example, you could include a file called _colors.scss into another file called styles.scss and the contents of _colors.scss will be included in the compiled CSS of styles.scss.

So let's do that now.

We create a file called _colors.scss with the following contents:

Now we include that file in our main Sass file. So our main Sass file called styles.scss looks like this:

Note that we dropped the leading underscore (_) and the file extension (.scss). No need to include those — Sass knows what we mean.

And the resulting CSS file looks like this: