SASS Partials

SASS/SCSS Partials are the CSS files that contain small CSS code specific for a particular styling separated from the main stylesheet for better managing the CSS code better. These files can be used in another SASS or SCSS file instead of writing the same styles again using the @use at-rule or @forward at-rule with both of them including the stylesheet with different visibility.

SASS Partials provides a great way to organize your CSS code in different files and then use them wherever required.

Do make a stylesheet as Partial in SASS, its name should always begin with _ underscore character for example, _partial.scss, etc.

The underscore character as a prefix to the stylesheet name indicates that this is a small chunk of CSS so there is no need to compile this to CSS independently.

Why use Partials?

Partials are used to manage the styling code into functionally divided style rules into separate files which can be used in the main stylesheet using the @use at-rule. There are many advantages to doing this like,

1. Your main stylesheet will be less bulky and you will be able to better manage your stylesheets.

2. Partials are not compiled, hence makes the overall compilation of SASS code to CSS fast.

3. You can control visibility of the style code defined in Partials using @use at-rule or @forward at-rule based on your requirements.

Consider the main.scss file which is the main file for the styles and now _partial.scss needs to be imported in this.

/* In the main.scss file */

@use 'partial'

Note that the _ character and the file extension is not used while importing. Once we include the file then all the contents in the partial will be available to use in the main file.

Visibility Control with Partial

Yes, SASS allows us to control the visibility of the members of a stylesheet when its included in another stylesheet. There are 2 different ways on controlling the visibility:

1. First one is by defining private members in Partials

2. Second is when we include a Partial in a stylesheet using the @use at-rule, then if that stylesheet(which is importing partial in it) is included by any other stylesheet, members defined in partial won't be visible. For making the members of Partial available in this case, we must use the @forward at-rule.

SASS Partials: Private Members

In SASS/SCSS we can define a private member in a stylesheet by adding a hyphen(-) or underscore(_) as a prefix to its name. The private members work normally within the stylesheet(Partial) it is defined, but they are not visible to the stylesheet including this Partial.

Let's take an example,

/* src/_corners.scss */
$-radius: 3px;

@mixin rounded {
  border-radius: $-radius;
}

Now if we import this stylesheet in another stylesheet,

/* style.scss */
@use "src/corners";

.button {
  @include corners.rounded;

  /* This is an error! $-radius isn't visible 
     outside of `_corners.scss`.
  */
  padding: 5px + corners.$-radius;
}

SASS Import using @use and @forward

When we include a Partial in a stylesheet using the @use at-rule, then if that stylesheet(which is importing partial in it) is included by any other stylesheet, members defined in partial won't be visible. For making the members of Partial available in this case, we must use the @forward at-rule.

If we use the @use at-rule, we can hide the members of a Partial from further use.

While using the @forward at-rule, enables using of a Partial included in a stylesheet in further imports too.

Conclusion:

So with this, we are done with Partials. SASS Partials provides us with a technique to manage our styling code with more control and to segregate the style rules meaningfully.