Generated by SassMeister.com.

SassMeister-input-HTML.haml

.wrapper
 .sidebar 
  .cartobject
   .cartheader YOUR SELECTIONS
   .cartlisting
    %ul.cartulist
     %li
      .cartitemobject
       .title a thing
       .qty 1
       .cost $000.00
       .remove{:title=>"remove"} x 
     %li
      .cartitemobject
       .title another thing
       .qty 1
       .cost $00000.00
       .remove{:title=>"remove"} x 
     %li
      .cartitemobject
       .title yet another thing
       .qty 1
       .cost $0000.00
       .remove{:title=>"remove"} x 
     %li
      .cartitemobject
       .title a final other thing
       .qty 1
       .cost $000.00
       .remove{:title=>"remove"} x 
   .cartfooter
    .qtytotal 4
    .costtotal $00000.00
    .gotocheckout checkout
 .content content here

SassMeister-input.scss

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

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

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

.wrapper {
  @include span(last 12 of 12 fluid);
  height:100%;
  
  .sidebar {
   @include span(3 of 12 fluid); 
   @include layout(12);
   
   background:#eee;
   min-height:45rem;
   height:45rem;
   font: { family:'Helvetica',sans-serif; size:1rem; weight:300; }
   
   .cartobject {
     @include span(last 10 of 12 fluid); @include post(1);
     box-shadow:0px 0px 3px gray;
     background:white;
     height:35rem;
     margin: { top:2.5rem; }
     border-radius:3px;
    // border: {left:2px solid #c02320; right:2px solid #c02320; }
     
     .cartheader { 
       @include span(full);
       height:2rem;
       text: { align:center; }
       padding: { top: 10px; }
       background:#c02320;
       color:white;
       font:{ size:1.2rem; weight:200; }
       border-top-right-radius:3px;
       border-top-left-radius:3px;
     } 
     
     .cartlisting {
       @include span(full);
       
       min-height:29rem;
      
        .cartulist {
          @include span(last 10 of 12 fluid); @include post(1);
          list-style-type:none;
           
           li {
             @include layout(12);
             display:block;
             padding:0;
             margin:0;
             position:relative;
             
             
             
            .cartitemobject{ 
              @include span(full);
              padding: { top:.5rem; bottom:.5rem; }
              
              .title { 
                @include span(full); 
                overflow:hidden;
                cursor:pointer;
                }
              .cost {
                @include span(7 of 12 fluid); 
                text: { align:right; }
                font: { size:.5rem; }
              }
              .qty { 
                @include span(2 of 12 fluid); 
                position:relative;
                font: { size:.5rem; }
                padding: { left:4px; }
                
                &:before {
                  position:absolute;
                  left:0px;
                  bottom:0px;
                  content:'x';
                }
                }
              .remove { 
                @include span(last 1 of 12 fluid); 
                font: { size:.5rem; weight:600; } 
                text: { align:center; }
                color:#c02320; 
                transition:color linear .2s;
                cursor:pointer;
                &:hover {
                  color:red;
                }
              }
             }  
           }
        }
     }
     
     .cartfooter {
       @include span(full);
       @include layout(12);
       
       border-bottom-right-radius:3px;
       border-bottom-left-radius:3px;
       height:4rem;
       background:#c02320;
       color:white;
       
       .qtytotal {
         @include span(2 of 12 fluid); 
         @include vert; 
         position:relative;
         text: { align:center; }
         
         &:after {
           position:absolute;
           content:'items';
           bottom:0;
           width:2.75rem;
           text: { align:right; }
         }
         }
       .costtotal {  text: { align:right; } @include span(7 of 12 fluid); @include vert; }
       .gotocheckout { 
         @include span(last 3 of 12 fluid); 
         @include vert;
         font: { size:1.2rem; weight:500; variant:small-caps }
         text: { align:center; transform:lowercase; }
         border: { left:1px solid white; }
         cursor:pointer;
         transition:color ease-in .3s;
         &:hover {
           color:#eee;
         }
         }
     }
   }
   
  }
  
  .content {
    @include span(last 8 of 12 fluid);
  }
}

SassMeister-output.css

.wrapper {
  width: 100%;
  float: right;
  height: 100%;
}
.wrapper .sidebar {
  width: 23.72881%;
  float: left;
  margin-right: 1.69492%;
  background: #eee;
  min-height: 45rem;
  height: 45rem;
  font-family: 'Helvetica',sans-serif;
  font-size: 1rem;
  font-weight: 300;
}
.wrapper .sidebar .cartobject {
  width: 83.05085%;
  float: right;
  margin-right: 8.47458%;
  box-shadow: 0px 0px 3px gray;
  background: white;
  height: 35rem;
  margin-top: 2.5rem;
  border-radius: 3px;
}
.wrapper .sidebar .cartobject .cartheader {
  width: 100%;
  float: left;
  height: 2rem;
  text-align: center;
  padding-top: 10px;
  background: #c02320;
  color: white;
  font-size: 1.2rem;
  font-weight: 200;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
.wrapper .sidebar .cartobject .cartlisting {
  width: 100%;
  float: left;
  min-height: 29rem;
}
.wrapper .sidebar .cartobject .cartlisting .cartulist {
  width: 83.05085%;
  float: right;
  margin-right: 8.47458%;
  list-style-type: none;
}
.wrapper .sidebar .cartobject .cartlisting .cartulist li {
  display: block;
  padding: 0;
  margin: 0;
  position: relative;
}
.wrapper .sidebar .cartobject .cartlisting .cartulist li .cartitemobject {
  width: 100%;
  float: left;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.wrapper .sidebar .cartobject .cartlisting .cartulist li .cartitemobject .title {
  width: 100%;
  float: left;
  overflow: hidden;
  cursor: pointer;
}
.wrapper .sidebar .cartobject .cartlisting .cartulist li .cartitemobject .cost {
  width: 57.62712%;
  float: left;
  margin-right: 1.69492%;
  text-align: right;
  font-size: .5rem;
}
.wrapper .sidebar .cartobject .cartlisting .cartulist li .cartitemobject .qty {
  width: 15.25424%;
  float: left;
  margin-right: 1.69492%;
  position: relative;
  font-size: .5rem;
  padding-left: 4px;
}
.wrapper .sidebar .cartobject .cartlisting .cartulist li .cartitemobject .qty:before {
  position: absolute;
  left: 0px;
  bottom: 0px;
  content: 'x';
}
.wrapper .sidebar .cartobject .cartlisting .cartulist li .cartitemobject .remove {
  width: 6.77966%;
  float: right;
  font-size: .5rem;
  font-weight: 600;
  text-align: center;
  color: #c02320;
  transition: color linear .2s;
  cursor: pointer;
}
.wrapper .sidebar .cartobject .cartlisting .cartulist li .cartitemobject .remove:hover {
  color: red;
}
.wrapper .sidebar .cartobject .cartfooter {
  width: 100%;
  float: left;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  height: 4rem;
  background: #c02320;
  color: white;
}
.wrapper .sidebar .cartobject .cartfooter .qtytotal {
  width: 15.25424%;
  float: left;
  margin-right: 1.69492%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  position: relative;
  text-align: center;
}
.wrapper .sidebar .cartobject .cartfooter .qtytotal:after {
  position: absolute;
  content: 'items';
  bottom: 0;
  width: 2.75rem;
  text-align: right;
}
.wrapper .sidebar .cartobject .cartfooter .costtotal {
  text-align: right;
  width: 57.62712%;
  float: left;
  margin-right: 1.69492%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.wrapper .sidebar .cartobject .cartfooter .gotocheckout {
  width: 23.72881%;
  float: right;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: 500;
  font-variant: small-caps;
  text-align: center;
  text-transform: lowercase;
  border-left: 1px solid white;
  cursor: pointer;
  transition: color ease-in .3s;
}
.wrapper .sidebar .cartobject .cartfooter .gotocheckout:hover {
  color: #eee;
}
.wrapper .content {
  width: 66.10169%;
  float: right;
}

SassMeister-rendered.html

<div class='wrapper'>
  <div class='sidebar'>
    <div class='cartobject'>
      <div class='cartheader'>YOUR SELECTIONS</div>
      <div class='cartlisting'>
        <ul class='cartulist'>
          <li>
            <div class='cartitemobject'>
              <div class='title'>a thing</div>
              <div class='qty'>1</div>
              <div class='cost'>$000.00</div>
              <div class='remove' title='remove'>x</div>
            </div>
          </li>
          <li>
            <div class='cartitemobject'>
              <div class='title'>another thing</div>
              <div class='qty'>1</div>
              <div class='cost'>$00000.00</div>
              <div class='remove' title='remove'>x</div>
            </div>
          </li>
          <li>
            <div class='cartitemobject'>
              <div class='title'>yet another thing</div>
              <div class='qty'>1</div>
              <div class='cost'>$0000.00</div>
              <div class='remove' title='remove'>x</div>
            </div>
          </li>
          <li>
            <div class='cartitemobject'>
              <div class='title'>a final other thing</div>
              <div class='qty'>1</div>
              <div class='cost'>$000.00</div>
              <div class='remove' title='remove'>x</div>
            </div>
          </li>
        </ul>
      </div>
      <div class='cartfooter'>
        <div class='qtytotal'>4</div>
        <div class='costtotal'>$00000.00</div>
        <div class='gotocheckout'>checkout</div>
      </div>
    </div>
  </div>
  <div class='content'>content here</div>
</div>