SASS Variables with abstraction

breakpoints.scss

$dre:   320px;
$diddy: 480px;
$jayz:  600px;

// Using breakpoint it’s as simple as

@include breakpoint( $dre ) {
  width: 320px;
}

colours.scss

// Colours
// All colour variable names should come from http://chir.ag/projects/name-that-color/
$azure:       #2C65AB;
$shamrock:    #2ECC71;
$white:       #FFFFFF;
$graychateau: #9CA1A4;
$tundora:     #404040;
$mystic:      #E9EDF2;
$botticelli:  #CED8E4;
$alto:        #DDDDDD;
$gallery:     #EEEEEE;
$portafino:   #FFFBB8;
$alabaster:   #F8F8F8;

// Network colour variables should be named after their network
// Each name is also the class name to be applied
$network-colors: (
  twitter:    #00ACED,
  youtube:    #CD201F,
  pinterest:  #CB2027,
  github:     #333333,
  dribbble:   #EA4C88,
  instagram:  #517FA4,
  facebook:   #3B5999
);

// Search Colours
$search-color:        $tundora;
$search-bg-hover:     $azure;
$search-color-hover:  $white;

typography.scss

$beauty:      16px;
$bravery:     28px;
$brilliance:  51px;
$brutality:   90px;