Generated by SassMeister.com.

SassMeister-input-HTML.haml

.wrapper
 .cartobject
  .carttotalitems 100 item(s)
  .cartsmallspace
  .carttotalcost $0000.00
  .cartviewcart 
   .cartviewbtn view cart

SassMeister-input.scss

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

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

$red : #c02320;
$gray : #696969;

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

@mixin cartbtn {
  cursor:pointer;
  height:3rem;
  width:10rem;
  background:$red;
  transition:background-color ease-in .2s;
  font: { family:'Helvetica',sans-serif; weight:300; size:2rem; variant:small-caps; }
  text: { align:center; }
  color:white;
  
  display:block;
  margin:0 auto;
  border-radius:3px;
  
  &:hover,&:focus {
    background:red;
  }
}


.wrapper {
  @include span(last 12 of 12 fluid);
  
  
  height:20rem;
  background:#eee;
  
  .cartobject {
    @include span(4 of 12 fluid);
    @include layout(12);
    
    height:20rem;
    background:white;
    position:relative;
    
     .carttotalitems {
       @include span(last 10 of 12 fluid); @include post(1);
       
       height:12rem;
       text: { align:center; }
       font: { size:8rem; weight:300; family:'Helvetica',sans-serif; }
       color:$red;
       @include vert;
     }
     .cartsmallspace {
       @include span(last 12 of 12 fluid);
       height:1.5rem;
       border-bottom:1px solid black;
     }
     .carttotalcost {
       @include span(6 of 12 fluid); 
       height:4rem;
       
       
       font: { size:4rem; weight:300; family:'Helvetica',sans-serif; }
       text: { align:center; }
       color:$red;
     }
     .cartviewcart {
       @include span(last 4 of 12 fluid);
       height:4rem;
       padding: { top:.25rem; }
       
        .cartviewbtn { @include cartbtn; @include vert; }
     }
  }
}

SassMeister-output.css

.wrapper {
  width: 100%;
  float: right;
  height: 20rem;
  background: #eee;
}
.wrapper .cartobject {
  width: 32.20339%;
  float: left;
  margin-right: 1.69492%;
  height: 20rem;
  background: white;
  position: relative;
}
.wrapper .cartobject .carttotalitems {
  width: 83.05085%;
  float: right;
  margin-right: 8.47458%;
  height: 12rem;
  text-align: center;
  font-size: 8rem;
  font-weight: 300;
  font-family: 'Helvetica',sans-serif;
  color: #c02320;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.wrapper .cartobject .cartsmallspace {
  width: 100%;
  float: right;
  height: 1.5rem;
  border-bottom: 1px solid black;
}
.wrapper .cartobject .carttotalcost {
  width: 49.15254%;
  float: left;
  margin-right: 1.69492%;
  height: 4rem;
  font-size: 4rem;
  font-weight: 300;
  font-family: 'Helvetica',sans-serif;
  text-align: center;
  color: #c02320;
}
.wrapper .cartobject .cartviewcart {
  width: 32.20339%;
  float: right;
  height: 4rem;
  padding-top: .25rem;
}
.wrapper .cartobject .cartviewcart .cartviewbtn {
  cursor: pointer;
  height: 3rem;
  width: 10rem;
  background: #c02320;
  transition: background-color ease-in .2s;
  font-family: 'Helvetica',sans-serif;
  font-weight: 300;
  font-size: 2rem;
  font-variant: small-caps;
  text-align: center;
  color: white;
  display: block;
  margin: 0 auto;
  border-radius: 3px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.wrapper .cartobject .cartviewcart .cartviewbtn:hover, .wrapper .cartobject .cartviewcart .cartviewbtn:focus {
  background: red;
}

SassMeister-rendered.html

<div class='wrapper'>
  <div class='cartobject'>
    <div class='carttotalitems'>100 item(s)</div>
    <div class='cartsmallspace'></div>
    <div class='carttotalcost'>$0000.00</div>
    <div class='cartviewcart'>
      <div class='cartviewbtn'>view cart</div>
    </div>
  </div>
</div>