Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="quick-deposit">
  <section class="quick-deposit__introduction">
    <header>
      <h1>Welcome</h1>
    </header>
  </section>
  <section class="quick-deposit__form">
    <label for="account_number" class="quick-deposit__label">Account #</label>
    <input id=account_number type="text" name="account_number" value="1234-1234-1234">
  </section>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

@import "compass";

@function percentage ($target, $context) {
  @return $target / $context * 100%;
}

@mixin root ($selector, $excludes: 'all') {
  @at-root (without: $excludes) {
    #{$selector} {
      @content;
    }
  }
}

// BEM
@mixin e ($element) {
  @at-root #{&}__#{$element} {
    @content;
  }
}

@mixin m ($modifier) {
  @at-root #{&}--#{$modifier} {
    @content;
  }
}

$colors: (
  primary: #444,
  secondary: #666
);

.quick-deposit {
  display: block;
  width: percentage(300, 960);

  // introduction
  @at-root {
    #{&}__introduction {
      display: block;
    }
  }
  
  @include e(test) {
    color: turquise;
    @include m(bold) {
      font-weight: bold;
    }
  }

  // form
  @at-root {
    #{&}__form {
      display: block;
    }
    #{&}__label--form {
      @extend %label !optional;
    }
  }
  
  // general
  @at-root {
    #{&}__label {
      color: map-get($colors, primary);
    }
  }
}

%label {
  color: if(map-has-key($colors, tertiary), map-get($colors, tertiary), null);
  width: 100%;
}

SassMeister-output.css

.quick-deposit {
  display: block;
  width: 31.25%;
}
.quick-deposit__introduction {
  display: block;
}
.quick-deposit__test {
  color: turquise;
}
.quick-deposit__test--bold {
  font-weight: bold;
}
.quick-deposit__form {
  display: block;
}
.quick-deposit__label {
  color: #444444;
}

.quick-deposit__label--form {
  width: 100%;
}

SassMeister-rendered.html

<div class="quick-deposit">
  <section class="quick-deposit__introduction">
    <header>
      <h1>Welcome</h1>
    </header>
  </section>
  <section class="quick-deposit__form">
    <label for="account_number" class="quick-deposit__label">Account #</label>
    <input id=account_number type="text" name="account_number" value="1234-1234-1234">
  </section>
</div>