Generated by SassMeister.com.

SassMeister-input-HTML.haml

.wrapper
 .section
  .object.super
   .message THIS IS A CALL TO ALL MY, THIS IS A CALL
  .object
   .sellable A1
  .object
   .sellable A2
  .object
   .sellable A3
  .object
   .sellable A4
  .object
   .sellable A5
  .object
   .sellable A1
  .object
   .sellable A2
  .object
   .sellable A3
  .object
   .sellable A4
  .object
   .sellable A5 

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v)
// Breakpoint (v)
// Susy (v)
// ----

@import "susy";
@import "breakpoint";
@import "compass";

@mixin vert {
             position: relative;
             top: 50%;
             -webkit-transform: translateY(-50%);
             -ms-transform: translateY(-50%);
             transform: translateY(-50%);
}


@mixin contentbox {
  height:10rem;
  min-height:10rem;
  max-height:10rem;
  overflow:hidden;
}

$map: layout(auto 12 .25 inside fluid);

.wrapper {
  @include span(full);
  
  .section {
    @include layout($map);
    
    
   .object {
     @include span(3 of 12 fluid);
     &.super { 
       @include span(6 of 12 fluid);
       padding: { top:2rem; }
       text: { align:center; }
       font: { size:3rem; family:"Georgia",serif; weight:500; }
       color:#696969;
       // padding: { left:2.125rem; }
       }
     &:nth-child(3) { @include omega; }
     &:nth-child(4) { @include omega; }
     &:last-child { @include span(rtl last 3 of 12 fluid); }
     
     @include contentbox; //border:1px solid #eee;
     
     .sellable {
       border:1px solid red;
       width:inherit;
       height:8rem;
       display:block;
       margin:0 auto;
       margin: { top:.5rem; }
     }
   } 
  }
}

SassMeister-output.css

.wrapper {
  width: 100%;
  float: left;
}
.wrapper .section .object {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 25%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
  height: 10rem;
  min-height: 10rem;
  max-height: 10rem;
  overflow: hidden;
}
.wrapper .section .object.super {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
  padding-top: 2rem;
  text-align: center;
  font-size: 3rem;
  font-family: "Georgia",serif;
  font-weight: 500;
  color: #696969;
}
.wrapper .section .object:nth-child(3) {
  float: right;
}
.wrapper .section .object:nth-child(4) {
  float: right;
}
.wrapper .section .object:last-child {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 25%;
  float: left;
  padding-right: 0.8333333333%;
  padding-left: 0.8333333333%;
}
.wrapper .section .object .sellable {
  border: 1px solid red;
  width: inherit;
  height: 8rem;
  display: block;
  margin: 0 auto;
  margin-top: .5rem;
}

SassMeister-rendered.html

<div class='wrapper'>
  <div class='section'>
    <div class='object super'>
      <div class='message'>THIS IS A CALL TO ALL MY, THIS IS A CALL</div>
    </div>
    <div class='object'>
      <div class='sellable'>A1</div>
    </div>
    <div class='object'>
      <div class='sellable'>A2</div>
    </div>
    <div class='object'>
      <div class='sellable'>A3</div>
    </div>
    <div class='object'>
      <div class='sellable'>A4</div>
    </div>
    <div class='object'>
      <div class='sellable'>A5</div>
    </div>
    <div class='object'>
      <div class='sellable'>A1</div>
    </div>
    <div class='object'>
      <div class='sellable'>A2</div>
    </div>
    <div class='object'>
      <div class='sellable'>A3</div>
    </div>
    <div class='object'>
      <div class='sellable'>A4</div>
    </div>
    <div class='object'>
      <div class='sellable'>A5</div>
    </div>
  </div>
</div>