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;
}

.global {
  width: 50%;
  background: rgba(255, 0, 0, 0.1);
  margin: 0 auto;
}
.global .mainLayout--content {
  width: 75%;
  background: rgba(255, 0, 0, 0.1);
  margin: 0 auto;
}
.global article {
  width: 50%;
  margin: 0 auto;
  background: rgba(255, 0, 0, 0.1);
}
.global figure {
  margin: 0;
  width: 266.66667%;
  position: relative;
  left: 50%;
  margin-left: -133.33333%;
  background: rgba(255, 0, 0, 0.1);
}

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

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

.global{
    width: 50%;
    background: hsla(360,100%,50%,0.1);
    margin: 0 auto;
    .mainLayout--content{
        width: 75%;
        background: hsla(360,100%,50%,0.1);
        margin: 0 auto;
    }
    article{
        width: 50%;
        margin: 0 auto;
        background: hsla(360,100%,50%,0.1);
    }
    figure{
        margin: 0;
        @include nested-context(75% 50%, center);
        background: hsla(360,100%,50%,0.1);
    }
}

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