How To Compile

node-sass css/scss/main.scss css/style.min.css --source-map true --source-map-embed true --output-style compressed

Variables

$base-height: 24px;
$primary-blue: #3e61a3;

section  {
    line-height: $base-height;
    color: $primary-blue;   
}

Include

@import 'base/utilities';

Structure

/css
  style.min.css
  /scss
    main.scss
    /base
      _base.scss
    /components
      _popup.scss

main.scss

$base-height: 24px;
$blue: #3e61a3;
@import 'base/base';
@import 'components/popup';

Mixins

Mixins let you add a chunk of css into another css block with a single line.

@mixin giant{
    font-size: 200%;
    font-weight: bold;
}

.special-text {
   @include giant;
  color: red;
}