Generated by SassMeister.com.

SassMeister-input-HTML.html

<header class="brand">
    <img src="" class="brand-logo"/>
    <h1 class="brand-name">The Sass Way</h1>
    <p class="brand-price">5/6</p>
</header>
<div class="cover">
    <h1 class="cover-title">The Marber Grid</h1>
    <cite class="cover-author">Singularity GS</cite>
</div>

SassMeister-input.scss

// ----
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
// ----

@import "singularitygs";
// Singularity Settings
$g-marber: 9.75 16.82 15.58 7.85 50;
$grids: $g-marber;
$gutters: 0;
$output: 'isolation';

%l--constrained {
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
}

%bordered {
    border-bottom: black 1px solid;
}

body { font-family: Helvetica, arial, sans-serif; }

//
// Branding
//
.brand { 
    @extend %l--constrained; 
    @extend %bordered;
}

.brand-logo {
    @include grid-span(1, 1);
    display: block;
    background: red;
    font-size: 1em;
}

.brand-name {
    @include grid-span(2, 4);
    background: red;
    font-size: 1em;
    margin-left: -100%;
}

.brand-price {
    @include grid-span(2, 4);
    margin-left: -100%;
}

//
// Cover
//

.cover { 
    @extend %l--constrained; 
    clear: both;
}

.cover-title { 
    @extend %bordered;
    padding-left: column-span(2, 1);
    border-bottom: black 1px solid;
}

.cover-author { 
    @extend %bordered;
    display: block;
    padding-left: column-span(3, 1);
}

SassMeister-output.css

.brand, .cover {
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
}

.brand, .cover-title, .cover-author {
  border-bottom: black 1px solid;
}

body {
  font-family: Helvetica, arial, sans-serif;
}

.brand-logo {
  width: 9.75%;
  float: left;
  margin-right: -100%;
  margin-left: 0%;
  clear: none;
  display: block;
  background: red;
  font-size: 1em;
}

.brand-name {
  width: 57.85%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  background: red;
  font-size: 1em;
  margin-left: -100%;
}

.brand-price {
  width: 57.85%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  margin-left: -100%;
}

.cover {
  clear: both;
}

.cover-title {
  padding-left: 26.57%;
  border-bottom: black 1px solid;
}

.cover-author {
  display: block;
  padding-left: 42.15%;
}

SassMeister-rendered.html

<header class="brand">
    <img src="" class="brand-logo"/>
    <h1 class="brand-name">The Sass Way</h1>
    <p class="brand-price">5/6</p>
</header>
<div class="cover">
    <h1 class="cover-title">The Marber Grid</h1>
    <cite class="cover-author">Singularity GS</cite>
</div>