SAAS partials

if you maintain the styles in single file, and project grows and multiple people are working on it, style code is difficult to maintain it . Because of this problem, styles are grouped into a in separate files with partial feature. partials are part or block of styles that are placed in separate files, 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 by different styles. The reason to put underscore is that this is partial file and not compiled into css styles Here is an 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 use @import with removing underscore of the partial file name.

@import "variables";

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

advantages of partials

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

These will not created a CSS file once 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 underscore symbol used in SASS

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

These files sass or scss files which are not compiled to css files.

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