DEV Community

Jessica Chappell
Jessica Chappell

Posted on

SASS Partials

Partials are an incredibly useful feature of SASS. They allow you to create snippets of CSS that you can import into other SASS files for modularity.

You can denote a partial file with a leading underscore like so:

- styles
  - base.scss
  - _colors.scss
Enter fullscreen mode Exit fullscreen mode

By themselves, these files won't be generated into CSS. However, variables defined in partial files will be replaced by their actual values at build time.

For example, you could have a partial file that looks like this:

// _colors.scss
$primary-color: black;
Enter fullscreen mode Exit fullscreen mode

and import the value into a regular .scss file like so:

// base.scss
@import "colors";

.button {
  color: $primary-color;
}
Enter fullscreen mode Exit fullscreen mode

Note how you don't need the leading underscore or the file extension when importing a partial!

Then when the css is transpiled the resulting file will look like this:

// base.css
.button {
  color: black;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)