Cacher is the code snippet organizer for pro developers

<div class="global">
    <div class="mainLayout--content">
        <article>
            Article Content
            <figure>figure</figure>
        </article>
    </div>
</div>

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url('//../behaviors/box-sizing/boxsizing.php');
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url('//../behaviors/box-sizing/boxsizing.php');
}

img, video {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

.global {
  background-image: -webkit-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 5.88235%, rgba(210, 105, 30, 0.25) 5.88235%, rgba(210, 105, 30, 0.25) 7.35294%, rgba(210, 105, 30, 0.5) 7.35294%, rgba(210, 105, 30, 0.5) 19.11765%, rgba(210, 105, 30, 0.25) 19.11765%, rgba(210, 105, 30, 0.25) 20.58824%, rgba(210, 105, 30, 0.5) 20.58824%, rgba(210, 105, 30, 0.5) 55.88235%, rgba(210, 105, 30, 0.25) 55.88235%, rgba(210, 105, 30, 0.25) 57.35294%, rgba(210, 105, 30, 0.5) 57.35294%, rgba(210, 105, 30, 0.5) 92.64706%, rgba(210, 105, 30, 0.25) 92.64706%, rgba(210, 105, 30, 0.25) 94.11765%, rgba(210, 105, 30, 0.5) 94.11765%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 101.47059%);
  background-image: -moz-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 5.88235%, rgba(210, 105, 30, 0.25) 5.88235%, rgba(210, 105, 30, 0.25) 7.35294%, rgba(210, 105, 30, 0.5) 7.35294%, rgba(210, 105, 30, 0.5) 19.11765%, rgba(210, 105, 30, 0.25) 19.11765%, rgba(210, 105, 30, 0.25) 20.58824%, rgba(210, 105, 30, 0.5) 20.58824%, rgba(210, 105, 30, 0.5) 55.88235%, rgba(210, 105, 30, 0.25) 55.88235%, rgba(210, 105, 30, 0.25) 57.35294%, rgba(210, 105, 30, 0.5) 57.35294%, rgba(210, 105, 30, 0.5) 92.64706%, rgba(210, 105, 30, 0.25) 92.64706%, rgba(210, 105, 30, 0.25) 94.11765%, rgba(210, 105, 30, 0.5) 94.11765%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 101.47059%);
  background-image: -o-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 5.88235%, rgba(210, 105, 30, 0.25) 5.88235%, rgba(210, 105, 30, 0.25) 7.35294%, rgba(210, 105, 30, 0.5) 7.35294%, rgba(210, 105, 30, 0.5) 19.11765%, rgba(210, 105, 30, 0.25) 19.11765%, rgba(210, 105, 30, 0.25) 20.58824%, rgba(210, 105, 30, 0.5) 20.58824%, rgba(210, 105, 30, 0.5) 55.88235%, rgba(210, 105, 30, 0.25) 55.88235%, rgba(210, 105, 30, 0.25) 57.35294%, rgba(210, 105, 30, 0.5) 57.35294%, rgba(210, 105, 30, 0.5) 92.64706%, rgba(210, 105, 30, 0.25) 92.64706%, rgba(210, 105, 30, 0.25) 94.11765%, rgba(210, 105, 30, 0.5) 94.11765%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 101.47059%);
  background-image: linear-gradient(to right, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 5.88235%, rgba(210, 105, 30, 0.25) 5.88235%, rgba(210, 105, 30, 0.25) 7.35294%, rgba(210, 105, 30, 0.5) 7.35294%, rgba(210, 105, 30, 0.5) 19.11765%, rgba(210, 105, 30, 0.25) 19.11765%, rgba(210, 105, 30, 0.25) 20.58824%, rgba(210, 105, 30, 0.5) 20.58824%, rgba(210, 105, 30, 0.5) 55.88235%, rgba(210, 105, 30, 0.25) 55.88235%, rgba(210, 105, 30, 0.25) 57.35294%, rgba(210, 105, 30, 0.5) 57.35294%, rgba(210, 105, 30, 0.5) 92.64706%, rgba(210, 105, 30, 0.25) 92.64706%, rgba(210, 105, 30, 0.25) 94.11765%, rgba(210, 105, 30, 0.5) 94.11765%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 101.47059%);
  background: rgba(255, 0, 0, 0.1);
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
.global:before, .global:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.global:after {
  clear: both;
}

.mainLayout--content {
  background: rgba(255, 0, 0, 0.1);
}
.mainLayout--content article {
  width: 85.29412%;
  float: left;
  margin-right: -100%;
  margin-left: 7.35294%;
  clear: none;
  background: rgba(255, 0, 0, 0.1);
}
.mainLayout--content figure {
  width: 117.24138%;
  position: relative;
  left: 50%;
  margin-left: -58.62069%;
  background: rgba(255, 0, 0, 0.1);
}

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

@import "compass";
@import "singularitygs";
@import "toolkit";

$grids: add-grid(1 2 6 6 1);

figure{
    margin: 0;
}

.global{
    @include background-grid;
    background: hsla(360,100%,50%,0.1);
    @include clearfix();
}

.mainLayout--content{
    background: hsla(360,100%,50%,0.1);
    article{
        @include grid-span(3,2);
        background: hsla(360,100%,50%,0.1);
    }
    figure{
        @include nested-context(85.29412%, center);
        background: hsla(360,100%,50%,0.1);
    }
}

<div class="global">
    <div class="mainLayout--content">
        <article>
            Article Content
            <figure>figure</figure>
        </article>
    </div>
</div>