Variables

    
      $green: #063;
      $green-dark: #043;
      $theme-color: $green;
      $link-color: $green;
      $link-hover-color: $green-dark;
    
  

!default

    
vendor/main.scss
    
      $theme-color: $gray !default;
    
    
_vars.scss
    
      $theme-color: $green;
    
    
site/app.scss
    
      @import "vars";
      @import "vendor/main";
    
  

!global (Sass 3.3+)

    
vendor/main.scss
    
      $theme-color: $gray !global;
    
    
_vars.scss
    
      $theme-color: $green;
    
    
site/app.scss
    
      @import "vars";
      @import "vendor/main";
    
  

Variables

Font Stacks

Parent Selector

Placeholders

    
      %center {
        margin-left: auto;
        margin-right: auto;
      }
    
  

Mixins

    
      @mixin font-family($font-family: "Helvetica") {
        font-family: $font-family, arial;
      }
    
  

Mixins

Reusable elements

Use reasonable defaults

Useful for browser prefixes and adding fallbacks

Helpful Mixins

Breakpoint

Extend

Reuse of CSS using selector inheritance

Like a mixin in practice

Pay attention to output