Sass Partials

Watch "Using Partials" on LinkedIn Learning

Partials are Sass files that contain little snippets of CSS or Sass that can be included into other Sass files. Partials are a great way to create modularized CSS, which is easier to maintain. To create a partial, simply add an underscore at the beginning of the filename. This will inform that Sass compiler not to compile this file directly.

To add a partial to another Sass file, the @import rule is used.

NOTE

While the @import rule can be used to import the partials, as of October 2019, the Sass team has begun discouraging it use in favor of the @use rule.

However, at this time, @use rule is not compatible with the compiler being used in this class. So, for now, we will continue to use @import

// _variables.scss
$offwhite:    #EEE8D6;
$darkblue:    #022933;
$yellow:      #FFBA00;

// _base.scss

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  font-family: $font-main;
  color: $color-main;
  background-color: $color-backgrounds;
}

.container {
  width: 80%;
  margin: 0 auto;
}


h1,h2,h3,h4,h5,h6 {
  font-family: $font-highlight;
  color: $color-headlines;
}

// style.scss
@import "variables";
@import "base";

# Sass Partials

Sass Partials