Using Sass partials for style organization

Sass has more features than just its advanced CSS syntax and language features. It also allows us to more easily modularize our styles into partials for easier reuse and configuration. The modularization aspect of Sass partials is one of the most powerful features for organizing and maintaining your app's styling.

Getting ready

Let's make the color definitions for our web application's Sass variables a separate configuration file from our other Sass files. This will make updating our branding or any other color configuration changes much easier to find and make in our application.

How to do it...

We will put our Sass color variables in a separate Sass file called _colors.scss in the same directory as /src/styles.scss:

$primary-color: #566FC6;
$secondary-color: #222c4f;

Sass's @import command acts very similarly to vanilla CSS3's @import command; however, since Sass is precompiled, it will not cause the extra unnecessary HTTP request:

@import "colors";...