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.