_variables.scss

// Fonts
$roboto:     "Roboto", sans-serif;
$lora:       "Lora", serif;

// Media queries
$extra-small-width:  320px;
$small-width:        576px;
$medium-width:       768px;
$large-width:        992px;
$extra-large-width:  1200px;

// Units:
$au: auto;
$n5: 5px;
$n10: 10px;
$n15: 15px;
$n20: 20px;
$n25: 25px;
$n30: 30px;
$n35: 35px;
$n40: 40px;
$n50: 50px;
$n60: 60px;
$n70: 70px;
$n80: 80px;
$n90: 90px;
$n100: 100px;

// Spacing
//
// Variables that define certain margin values to be used mostly
// for vertical spacing between and inside blocks.
//
// Markup:
// <div class="block">
//   this is a block with <code>margin-top: $space-md</code>
//   and <code>margin-bottom: $space-xl</code> on large screens.
// </div>
//
// Styleguide Layout.spacing
$space-xxs: 4px;
$space-xs:  8px;
$space-sm:  12px;
$space-md:  16px;
$space-lg:  32px;
$space-xl:  48px;
$space-xxl: 64px;