Common Sass Structures

The _extends.scss file contains all the placeholders that you’ll @extend in your partials.

scss
|__ style.scss
|__ base
|   _index.scss
|   _base.scss      
|__components
|   _index.scss
|   _extends.scss
|   _buttons.scss
|   _icons.scss
|   _typography.scss
|   etc...
|__layout 
    _index.scss
    _extends.scss
    _header.scss
    _footer.scss
    _containers.scss
    _columns.scss
    etc...

Extending Placeholders

_extends.scss

%centered {
  text-align: centered;
}
%t-border {
  border-top: 1px solid #fff;
}

_buttons.scss

.btn-info {
  @extend %centered;
  font-size: 1.1em;
  background-color: $color-secondary;
}

A placeholder offers its rule properties to other rules without being present in the CSS.
It is used with the @extend directive, the @extend summons the properties of a placeholder rule.

Now Import Your Extends

Import your extends in the _index.scss file.

@import 'header';
@import 'footer';
@import 'containers';
@import 'columns';
@import 'extends';

Place your _extends.scss import line at the end of the list of imports.