What are partials in Sass?

Experience Level: Junior
Tags: Sass

Answer

The partials are Sass snippets that are stored in standalone .scss files.

The file names of Sass partials are prefixed by underscore character. This way it is clear what file is full Sass stylesheet and what file is Sass partial.

The partials can be included into Sass stylesheets and are great for code organization.

You can for example store stylesheets for standalone components into standalone partials and then merge them into the main Sass stylesheet.

_buttons.scss

$primary: blue;
$error: red;

button {
  background-color: $primary;
  color: white;
  border: none;
}

button.error {
  background-color: $error;
  color: white;
  border: none;
}

_dialogs.scss

.dialog {
  border: solid 1px gray;
  border-radius: 15px;
  padding: 15px;
}

styles.scss

@import 'buttons';
@import 'dialogs';

Comments

No Comments Yet.
Be the first to tell us what you think.
Sass for beginners
Sass for beginners

Are you learning Sass ? Try our test we designed to help you progress faster.

Test yourself