Skip to Content
Learn
Sustainable SCSS
Organize with Partials

Partials in Sass are the files you split up to organize specific functionality in the codebase.

  • They use a _ prefix notation in the file name that tells Sass to hold off on compiling the file individually and instead import it.
_filename.scss
  • To import this partial into the main file - or the file that encapsulates the important rules and the bulk of the project styles - omit the underscore.

For example, to import a file named _variables.scss, add the following line of code:

@import "variables";

The global file imports all the components and centralizes the logic.

Instructions

1.

At the top of main.scss, import the variables partial:

@import "helper/variables";

A reminder that helper refers to resources like variables, mixins, functions, etc. These are the elements that “help” make up the foundation of your codebase as it grows.

Click “Run” to see your changes in the browser and inspect them in the output of main.css.

Folder Icon

Sign up to start coding

Already have an account?