Quick answer: Partials in SASS are small files that hold parts of your stylesheet, such as variables, mixins, or one navigation block, so a large file becomes easy to manage. A partial starts with an underscore and never compiles on its own. You pull it in with an import statement.
Learn Partials in SASS quickly in 5 mins and start implementing in your projects
Partial in SASS / SCSS is useful when the project files are enormous. Reusing or maintaining such huge SCSS files is cumbersome. Partial SCSS allows developers to split the variable, resets or page-wise SCSS separately and quickly embed them in the main SCSS. The main advantage of SASS is that partial SCSS files will not compile into new CSS files and therefore it becomes easier to manage.
To make a particular SCSS a partial file, we can add an underscore before the file name and follow by .scss extension. For example, if we are to take variables of the main scss to a partial file, we can cut the variables and paste in a new scss file with the name _variables.scss and we can embed it using the import function in the main scss.
SCSS file before the split of partial SCSS files:
File name: main.scss
$primary-color: #d2d2d2;
$secondary-color: #322332;
$accent-color: #435434;
$text-color: #0000;
p{
color:$primary-color;
background-color: $secondary-color;
}CSS Output
p{
color: #d2d2d2;
background-color: #322332;
}
Split variables to new SCSS files
File name: _variables.scss
$primary-color: #d2d2d2;
$secondary-color: #322332;
$accent-color: #435434;
$text-color: #0000;File name: main.scss
@import './variables';
p{
color:$primary-color;
background-color: $secondary-color;
}Please note: No need to call the filename with an extension scss, calling just the name of the file is sufficient
CSS Output
p{
color: #d2d2d2;
background-color: #322332;
}In the next tutorials, we will learn how to create functions and call functions in SASS.
For more details about various courses, check out Ampersand Academy.
Frequently asked questions
What is a SASS partial?
A partial is a SASS file whose name starts with an underscore. It holds shared styles and is not compiled on its own.
How do I use a partial in my stylesheet?
Import it at the top of your main file, without the underscore or extension, like @use base/variables. SASS includes it in the output.
Why should I split styles into partials?
It keeps large projects organised, avoids repeating shared code, and makes styles easier to find and maintain.