SASS Rails pipeline

application.css.scss

 @import 'common/mixins';

 @import 'common/variables'; /* variable $content-max-width defined here */
 .main { height: $content-max-width; } /* works */
 @import 'common/content'; /* fails, undefined variable $content-max-width */

content.scss

main {
  width: $content-max-width;
  display: block;
  background-color: $content-bg-color;
  margin: 0 auto;
  min-height: calc(100% - #{$header-height} - #{$footer-height});
  padding: 20px;

  font-weight: 1.1em;
  line-height: 1.6em;
  letter-spacing: 0.01em;

  @media screen and (max-width: $break-tablet-portrait) {
    width: 100%
  }

  h2 {
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;
    margin-bottom: 1.2em;
  }

  p {
    margin-bottom: 1.2em;
  }

  span, a {
    font-weight: 600;
  }
}

variables.scss

$break-tablet-landscape: 1024px;
$break-tablet-portrait: 768px;
$break-phone-landscape: 480px;
$break-phone-portrait: 320px;

$dark-bg-color: #161616;
$body-bg-color: #ecf0f1;

$content-bg-color: #fff;

$header-height: 132px;
$footer-height: 50px;

$font-size-small: 0.8em;

$blog-color: #db334d;
$code-color: #cfc61c;
$quantified-color: #4f47c2;

$content-max-width: 768px;