SAAS - Partials

SAAS partials

if you maintain the styles in a single file, and the project grows and multiple people are working on it, style code is difficult to maintain. Because of this problem, styles are grouped into separate files with a partial feature. partials are parts or blocks of styles that are placed in separate files, and can be reused across projects.

partials in sass are defined with filename started with underscore ie. filename.scss or_filename. sass. These files are imported in different styles. The reason to put underscore is that this is a partial file and not compiled into CSS styles Here is a syntax for partial file

partial file is_variable.scss

|-- main.scss
|-- _variables.scss

Let’s declare variables in _variables.scss

$blue: blue;
$green: green;
$red: red;

Then you can import in multiple places and files.

So you have to use @import with removing the underscore of the partial file name.

@import "variables";

header {
  color: $red;
}
paragraph {
  color: $green;
}

advantages of partials

Partial files are helpful to separate the variables, and mixins into a separate file.

These will not create a CSS file once the file is imported during compilation.

It helps to separate the style like variables, mixins, rests, and application layout features So that It is reusable.

It improves code cleanup and modularity

What is the underscore symbol used in SASS

_(underscore) is used to represent that it is a partial file and reusable in multiple places.

These files are sass or scss files that are not compiled into CSS files.

The underscore files are used in other files using the @import keyword.