Introduction to Settings

Setting files contain global configurations that are shared by more than one modules. Settings that are connected to one and only module are a part of the module itself.

Settings files contain global, site-wide configurations.

Local configurations should be contained into the modules (objects, components, etc.) that are related to. Some examples of global settings are colors, font sizes, font-families, breakpoints and grid sizes. If you want to save for example the padding of a specific component as a variable you should store it inside the component file.

Available Settings

Examples

1
2
3
4
5
// settings/_colors.scss

// Global configs
$color-white: #fff;
$color-black: #000;

1
2
3
4
5
6
7
8
9
// components/_button.scss

// Local configs used only by button component
$button-padding: 14px;

.c-button {
  color: $color-white;
  padding: $button-padding;
}

1
2
3
4
5
6
7
8
9
// components/_modal.scss

// Local configs used only by modal component
$modal-bgcolor: #efefef;

.c-modal {
  color: $c_black;
  background: $modal-bgcolor;
}