Typical base scss setup with variables and mixins

_base.scss

@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "compass/css3";
@import "breakpoint";


// Colors
$color-red: #C84942;
$color-red-hover: #B6312A;
$color-pink: #E9B7B4;
$color-purple: #892554;
$color-purple-hover: #65153B;
$color-green: #329A94;
$color-green-hover: #1F837D;
$color-dark-gray: #4D4D4D;
$color-tan: #C0BDB4;
$color-tan-dark: #959081;

$color-dark-text: #322C2A;


$color-background-light: #EDECE9;
$color-background-dark: #292828;
$color-background-footer: $color-tan;


$color-facebook-blue: #3B5998;
$color-facebook-blue-hover: #26427D;
$color-twitter-blue: #1DA1F2;
$color-twitter-blue-hover: #198DD4;
$color-instagram: #D22957;
$color-instagram-hover: #A81F44;
$color-google: #DB4437;
$color-google-hover: #B83E34;


// breakpoints
$bp-xs: 380px;
$bp-sm: 600px;
$bp-md: 1024px;
$bp-lg: 1400px;

$bp-sm-md: $bp-sm ($bp-md - 1);
$bp-sm-lg: $bp-sm ($bp-lg - 1);
$bp-md-lg: $bp-md ($bp-lg - 1);


// fonts
@mixin raleway {
  font-family: 'Raleway', sans-serif;
}

@mixin source {
  font-family: 'Source Sans Pro', sans-serif;
}


// vertcal and horizontal alignment

// uses flexbox to horizontally and vertically center child element (this may be less buggy than the centering mixins below)
@mixin flex-center-child-elements {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Centering: NOTE - requires absolute or relative positioning
@mixin vertical-align($position: relative, $offset: 50%) {
  position: $position;
  top: $offset;
  @include transform(translateY(-50%));
}

// for use with absolute or relatively positioned elements
@mixin horizontal-align($position: relative, $offset: 50%) {
  position: $position;
  left: $offset;
  @include transform(translateX(-50%));
}

@mixin both-align($position: relative, $offset-left: 50%, $offset-top: 50%) {
  position: $position;
  left: $offset-left;
  top: $offset-top;
  @include transform(translate(-50%, -50%));
}

// use this on parent of vertically aligned element
// if vertically aligned element becomes blurry
@mixin center-aligned-parent {
  @include transform-style(preserve-3d);
}