Styles File Structures

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

scss
|__ style.scss
|__ base
|     _index.scss
|     _base.scss      
|     _variables.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... 

What Are Variables?

_variables.scss

/* Font Stacks ======================*/
$stack-sans-serif: Helvetical, Arial, sans-serif;
$stack-helvetica: 'Helvetical Neue', $stack-sans-serif;
$stack-serif: 'Times New Roman', Times, serif;

/* Border Radius Stacks ======================*/
$br10: 10px;
 
/* Asset Paths ======================*/
$path-img: '../images';
$path-font: '../fonts';
  

Image Path Interpolation

To use the image path variable, instead of using it directly as $path-img, in the path you place it inside a #{...}.

_header.scss

.main-header {
    background: transparent url('#{$path-img}/mountain.jpg') no-repeat center center;
}

Check the following page for more details on Variables:

Now Import Your Variables

Now that you have your variables ready, import your _variables.scss on top of all other imports in the _index.scss file.

/* Base Imports ===========================*/ 
@import 'variables';
@import 'base';