sass Getting started with sass Importing

Example

Let's assume the following scenario: You have two stylesheets: _variables.scss and layout.scss. Logically, you keep all your variables inside your variable stylesheet but want to access them from your layout stylesheet.

NOTE: You may notice that the variables stylesheet has an underscore ('_') before it's name. This is because it's a partial - meaning it's going to be imported.

sass-lang.com says the following about partials: You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. [...] The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

SCSS variables are great for this scenario. Let's assume that your _variables.scss looks like this:

$primary-color: #333;

You can import it with @import and then the stylesheet's name in quotes. Your layout stylesheet may now look like this (take note of there not being an underscore or file extension in the import):

@import 'variables';
body {
  color: $primary-color;
}

---

This would output something like the following:

body {
  color: #333;
}