Generated by SassMeister.com.

SassMeister-input-HTML.haml

%html
 %head
 %body
  .mailwrapper
   .header 
    .logoside 
     %img{:src=>'https://www.burdiclothing.com/images/mail/crest-abbrev-red.png',:class=>'burdilogoimage'}
    .detailside
     .details 
      .detailsorder 
       Order Number:
      .detailsorderdata 
       {{00000000}}
      .detailsdate 
       Order Date: 
      .detailsdatedata 
       {{date}}
      .detailsid {{IDNUMBER}}
   .body
    .salutation Hi {{name here}},
    %p.introparagraph Thank you again for your order.
    %p.introparagraph
     As promised, here's a copy of your receipt. If you have any questions, we're very happy to answer them anytime. 
     {{When your items are ready for pick-up, we'll be in contact}} {{As soon as your items ship, we'll be in contact.}}
    .tablewrapper
     %table.invoicetable
      %tr.itemlisting 
       %td ITEM
       %td QTY
       %td PRICE
      %tr.itemlisting  
       %td ITEM
       %td QTY
       %td PRICE  
      %tr.itemlisting 
       %td ITEM
       %td QTY
       %td PRICE  
     %table.sumsup    
      %tr.grandtotal
       %td 
        .paymentname JOHN SMITH
        .paymentcardtype VISA
        .paymentlastfour XXXX-XXXX-XXXX-1234
       %td 
        .shippingmethod IN-STORE PICKUP
        .shippingname JOHN SMITH
        .shippingaddress1 58 E WALTON STREET
        .shippingaddress2 CHICAGO, IL 60611
       %td
        .totalvalue {{GRANDTOTAL}}
        .valuenote including any taxes and shipping, if applicable.
   .footer
    .logoside
     %img{:src=>'https://www.burdiclothing.com/images/mail/logo-red.png',:class=>'burdilogoimage'}
    .detailsside 58 E Walton Street, Chicago, IL 60611
    .phoneside 312-642-9166  
    .websiteside 
     %a{:href=>"burdiclothing.com"} burdiclothing.com

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Breakpoint (v2.4.2)
// Susy (v2.1.2)
// ----

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


$susy: (
  flow:ltr,
  math:fluid,
  output:float,
  container:auto,
  container-position:center,
  column-width:5rem,
  columns:12,
  gutters:.95rem/5rem,
  box-sizing:border-box,
  last-flow:to
  );

$XS: 20rem;
$S: 40rem;
$L: 60rem;

$SL: 8;
$LL: 12;

body {
@include container($susy);
 font: { family:'Helvetica', sans-serif; weight:200; size:1rem; }
}

.mailwrapper {
  
  @include susy-breakpoint($XS $S,$SL) { width:480px; padding: { left:5px; right:5px; } }  // iPhone
  @include susy-breakpoint($S $L,$SL) { width:600px; padding: { left:5px; right:5px; } } // iPad
  @include susy-breakpoint($L,$LL) { 
   // width:800px; 
   width:480px;
  } // DESKTOP (as expected)
  
  
  margin:0 auto;
  display:block;
  
  border-radius:3px;
  
  background: {
    color:white;
  }
  
  .header {
    margin: { top:5rem; bottom:2rem; }
    @include span(last 12 of 12 fluid);
    // @include span(last 10 of 12 fluid); FULL SIZE
    // @include post(1);
    height:5rem;
    max-height:5rem;
    
    .logoside {
      @include span(2 of 12 fluid);
     img {
       max-height:5rem;
       overflow:hidden;
     }
    }
    .detailside {
      @include span(last 8 of 12 fluid);
      height:5rem;
      
      .details {
        @include span(last 12 of 12 fluid);
        height:3rem;
        margin: { top:2rem; }
       
        
        .detailsorder, .detailsdate { 
          font: { weight:bold; size:.5rem; } 
          color:#696969;
          @include span(4 of 12 fluid); // full size 2
          @include pre(3); // full size 6
          height:.65rem;
          text: { align:right; }
          margin: { bottom:.25rem; }
        }
        .detailsorderdata, .detailsdatedata { 
          font: { weight:200; size:.5rem; } 
          color:#696969;
          @include span(last 4 of 12 fluid);
          height:.65rem;
          margin: { bottom:.25rem; }
        }
        .detailsid {
          font: { weight:200; size:.5rem; }
          color:#696969;
          @include span(last 4 of 12 fluid);
          @include pre(8);
          margin: { top:.25rem; }
        }
      }
    }
  }
  
  .body {
    @include span(last 12 of 12 fluid);
    margin: { top:3rem; }
    min-height:25rem;
    .salutation,
    .introparagraph {
      @include span(last 12 of 12 fluid);
      // @include span(last 10 of 12 fluid); full-size
      // @include post(1);
      line-height:1.5rem; // full-size 1.25rem
      color:#696969;
    }
    .tablewrapper {
      @include span(last 12 of 12 fluid);
      //@include span(last 12 of 12 fluid); FULL SIZE
      //@include post(1);
      color:#696969;
    
    .invoicetable {
      width:100%;
       .itemlisting {
         font: { size:.75rem; }
         height:2rem;
         td {
           &:nth-child(1) { text: { align:left; } width:60%; }
           &:nth-child(2) { text: { align:center; } width:20%; }
           &:nth-child(3) { text: { align:right; } width:20%; }
         }
       }
    }
    .sumsup {
      width:100%;
      margin: { top:2rem; }
     // background: { color:rgba(#696969, .65); }
      padding:5px; 
      border-radius:3px;
      
      td {
        @include span(last 12 of 12 fluid);
        //width:33%; 
        height:5rem;
        color:#696969!important;
        &:nth-child(1) { text: { align:left; } }
        &:nth-child(2) { text: { align:left; } }
        &:nth-child(3) { text: { align:right; } }
         .paymentname { width:100%; height:2rem; weight:700; }
         .paymentcardtype { font: { size:.5rem; } height:2rem; width:25%; float:left; }
         .paymentlastfour { font: { size:.5rem; } height:2rem; width:75%; float:left; }
         .shippingmethod { width:100%; height:2rem; weight:700; }
         .shippingname { width:100%; height:1rem; font: { size:.5rem; } }
         .shippingaddress1 { width:50%; height:1rem; font: { size:.5rem; } float:left; }
         .shippingaddress2 { width:50%; height:1rem; font: { size:.5rem; } float:left; }
         .totalvalue { font: { size:1.5rem; weight:700; } height:2rem; color:#696969; text: { align:center; } }
         .valuenote { font: { size:.5rem;  weight:200; }  color:rgba(#696969,.4);  text: { align:center; } }
      }
    }
   }  
  }
  
  
  .footer {
    @include span(last 12 of 12 fluid); 
    // @include span(last 10 of 12 fluid); full-size
    // @include post(1);
    height:5rem;
    max-height:5rem;
    margin: { bottom:2rem; }
    
     .logoside {
       @include span(last 4 of 12 fluid); // full-size 4 not last
       @include post(3.75); // not in full-size
       max-height:5rem;
        img {
          overflow:hidden;
          max-height:5rem;
        }
     }
    .detailsside {
      @include span(12 of 12 fluid); // full-size 4
      color:#c02320;
      height:1rem;
      // margin: { top:3rem; } full-size
      font: { size:.65rem; weight:200; }
      text: { align:center; } // full-size right
    }
    .phoneside {
      @include span(2 of 12 fluid);
      color:#c02320;
      height:1rem;
      margin: { top:3rem; }
      font: { size:.65rem; weight:200; }
      text: { align:right; }
    }
    .websiteside {
      @include span(last 2 of 12 fluid);
      height:1rem;
      margin: { top:2.75rem; }
      text: { align:right }
       a {
         color:#c02320;
         font: { size:.65rem; weight:200; }
         text: { decoration:none;  }
       }
    }
    
  }
}

SassMeister-output.css

body {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 70.45rem;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Helvetica', sans-serif;
  font-weight: 200;
  font-size: 1rem;
}
body:after {
  content: " ";
  display: block;
  clear: both;
}

.mailwrapper {
  margin: 0 auto;
  display: block;
  border-radius: 3px;
  background-color: white;
}
@media (min-width: 20rem) and (max-width: 40rem) {
  .mailwrapper {
    width: 480px;
    padding-left: 5px;
    padding-right: 5px;
  }
}
@media (min-width: 40rem) and (max-width: 60rem) {
  .mailwrapper {
    width: 600px;
    padding-left: 5px;
    padding-right: 5px;
  }
}
@media (min-width: 60rem) {
  .mailwrapper {
    width: 480px;
  }
}
.mailwrapper .header {
  margin-top: 5rem;
  margin-bottom: 2rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: right;
  margin-right: 0;
  height: 5rem;
  max-height: 5rem;
}
.mailwrapper .header .logoside {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 15.54294%;
  float: left;
  margin-right: 1.34847%;
}
.mailwrapper .header .logoside img {
  max-height: 5rem;
  overflow: hidden;
}
.mailwrapper .header .detailside {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 66.21718%;
  float: right;
  margin-right: 0;
  height: 5rem;
}
.mailwrapper .header .detailside .details {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: right;
  margin-right: 0;
  height: 3rem;
  margin-top: 2rem;
}
.mailwrapper .header .detailside .details .detailsorder, .mailwrapper .header .detailside .details .detailsdate {
  font-weight: bold;
  font-size: .5rem;
  color: #696969;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 32.43435%;
  float: left;
  margin-right: 1.34847%;
  margin-left: 25.33712%;
  height: .65rem;
  text-align: right;
  margin-bottom: .25rem;
}
.mailwrapper .header .detailside .details .detailsorderdata, .mailwrapper .header .detailside .details .detailsdatedata {
  font-weight: 200;
  font-size: .5rem;
  color: #696969;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 32.43435%;
  float: right;
  margin-right: 0;
  height: .65rem;
  margin-bottom: .25rem;
}
.mailwrapper .header .detailside .details .detailsid {
  font-weight: 200;
  font-size: .5rem;
  color: #696969;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 32.43435%;
  float: right;
  margin-right: 0;
  margin-left: 67.56565%;
  margin-top: .25rem;
}
.mailwrapper .body {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: right;
  margin-right: 0;
  margin-top: 3rem;
  min-height: 25rem;
}
.mailwrapper .body .salutation,
.mailwrapper .body .introparagraph {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: right;
  margin-right: 0;
  line-height: 1.5rem;
  color: #696969;
}
.mailwrapper .body .tablewrapper {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: right;
  margin-right: 0;
  color: #696969;
}
.mailwrapper .body .tablewrapper .invoicetable {
  width: 100%;
}
.mailwrapper .body .tablewrapper .invoicetable .itemlisting {
  font-size: .75rem;
  height: 2rem;
}
.mailwrapper .body .tablewrapper .invoicetable .itemlisting td:nth-child(1) {
  text-align: left;
  width: 60%;
}
.mailwrapper .body .tablewrapper .invoicetable .itemlisting td:nth-child(2) {
  text-align: center;
  width: 20%;
}
.mailwrapper .body .tablewrapper .invoicetable .itemlisting td:nth-child(3) {
  text-align: right;
  width: 20%;
}
.mailwrapper .body .tablewrapper .sumsup {
  width: 100%;
  margin-top: 2rem;
  padding: 5px;
  border-radius: 3px;
}
.mailwrapper .body .tablewrapper .sumsup td {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: right;
  margin-right: 0;
  height: 5rem;
  color: dimgray !important;
}
.mailwrapper .body .tablewrapper .sumsup td:nth-child(1) {
  text-align: left;
}
.mailwrapper .body .tablewrapper .sumsup td:nth-child(2) {
  text-align: left;
}
.mailwrapper .body .tablewrapper .sumsup td:nth-child(3) {
  text-align: right;
}
.mailwrapper .body .tablewrapper .sumsup td .paymentname {
  width: 100%;
  height: 2rem;
  weight: 700;
}
.mailwrapper .body .tablewrapper .sumsup td .paymentcardtype {
  font-size: .5rem;
  height: 2rem;
  width: 25%;
  float: left;
}
.mailwrapper .body .tablewrapper .sumsup td .paymentlastfour {
  font-size: .5rem;
  height: 2rem;
  width: 75%;
  float: left;
}
.mailwrapper .body .tablewrapper .sumsup td .shippingmethod {
  width: 100%;
  height: 2rem;
  weight: 700;
}
.mailwrapper .body .tablewrapper .sumsup td .shippingname {
  width: 100%;
  height: 1rem;
  font-size: .5rem;
}
.mailwrapper .body .tablewrapper .sumsup td .shippingaddress1 {
  width: 50%;
  height: 1rem;
  font-size: .5rem;
  float: left;
}
.mailwrapper .body .tablewrapper .sumsup td .shippingaddress2 {
  width: 50%;
  height: 1rem;
  font-size: .5rem;
  float: left;
}
.mailwrapper .body .tablewrapper .sumsup td .totalvalue {
  font-size: 1.5rem;
  font-weight: 700;
  height: 2rem;
  color: #696969;
  text-align: center;
}
.mailwrapper .body .tablewrapper .sumsup td .valuenote {
  font-size: .5rem;
  font-weight: 200;
  color: rgba(105, 105, 105, 0.4);
  text-align: center;
}
.mailwrapper .footer {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: right;
  margin-right: 0;
  height: 5rem;
  max-height: 5rem;
  margin-bottom: 2rem;
}
.mailwrapper .footer .logoside {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 32.43435%;
  float: right;
  margin-right: 0;
  margin-right: 31.6714%;
  max-height: 5rem;
}
.mailwrapper .footer .logoside img {
  overflow: hidden;
  max-height: 5rem;
}
.mailwrapper .footer .detailsside {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  color: #c02320;
  height: 1rem;
  margin-top: 3rem;
  font-size: .65rem;
  font-weight: 200;
  text-align: center;
}
.mailwrapper .footer .phoneside {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 15.54294%;
  float: left;
  margin-right: 1.34847%;
  color: #c02320;
  height: 1rem;
  margin-top: 3rem;
  font-size: .65rem;
  font-weight: 200;
  text-align: right;
}
.mailwrapper .footer .websiteside {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 15.54294%;
  float: right;
  margin-right: 0;
  height: 1rem;
  margin-top: 2.75rem;
  text-align: right;
}
.mailwrapper .footer .websiteside a {
  color: #c02320;
  font-size: .65rem;
  font-weight: 200;
  text-decoration: none;
}

SassMeister-rendered.html

<html>
  <head>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-4.newrelic.com","errorBeacon":"bam.nr-data.net","licenseKey":"44dddd5607","applicationID":"2515490","transactionName":"Jl5bQEIOCQpWFk5jXwtQQUZRTi0SXggiX1sVWFlRQiAVFhw0LmNiRQ==","queueTime":16,"applicationTime":8,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-411.min.js","extra":""}</script>
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,n,e){function r(e){if(!n[e]){var o=n[e]={exports:{}};t[e][0].call(o.exports,function(n){var o=t[e][1][n];return r(o?o:n)},o,o.exports)}return n[e].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<e.length;o++)r(e[o]);return r}({D5DuLP:[function(t,n){function e(t,n){var e=r[t];return e?e.apply(this,n):(o[t]||(o[t]=[]),void o[t].push(n))}var r={},o={};n.exports=e,e.queues=o,e.handlers=r},{}],handle:[function(t,n){n.exports=t("D5DuLP")},{}],G9z0Bl:[function(t,n){function e(){var t=l.info=NREUM.info;if(t&&t.agent&&t.licenseKey&&t.applicationID&&p&&p.body){l.proto="https"===f.split(":")[0]||t.sslForHttp?"https://":"http://",i("mark",["onload",a()]);var n=p.createElement("script");n.src=l.proto+t.agent,p.body.appendChild(n)}}function r(){"complete"===p.readyState&&o()}function o(){i("mark",["domContent",a()])}function a(){return(new Date).getTime()}var i=t("handle"),u=window,p=u.document,s="addEventListener",c="attachEvent",f=(""+location).split("?")[0],l=n.exports={offset:a(),origin:f,features:[]};p[s]?(p[s]("DOMContentLoaded",o,!1),u[s]("load",e,!1)):(p[c]("onreadystatechange",r),u[c]("onload",e)),i("mark",["firstbyte",a()])},{handle:"D5DuLP"}],loader:[function(t,n){n.exports=t("G9z0Bl")},{}]},{},["G9z0Bl"]);</script></head>
  <body>
    <div class='mailwrapper'>
      <div class='header'>
        <div class='logoside'>
          <img class='burdilogoimage' src='https://www.burdiclothing.com/images/mail/crest-abbrev-red.png'>
        </div>
        <div class='detailside'>
          <div class='details'>
            <div class='detailsorder'>
              Order Number:
            </div>
            <div class='detailsorderdata'>
              {{00000000}}
            </div>
            <div class='detailsdate'>
              Order Date:
            </div>
            <div class='detailsdatedata'>
              {{date}}
            </div>
            <div class='detailsid'>{{IDNUMBER}}</div>
          </div>
        </div>
      </div>
      <div class='body'>
        <div class='salutation'>Hi {{name here}},</div>
        <p class='introparagraph'>Thank you again for your order.</p>
        <p class='introparagraph'>
          As promised, here's a copy of your receipt. If you have any questions, we're very happy to answer them anytime.
          {{When your items are ready for pick-up, we'll be in contact}} {{As soon as your items ship, we'll be in contact.}}
        </p>
        <div class='tablewrapper'>
          <table class='invoicetable'>
            <tr class='itemlisting'>
              <td>ITEM</td>
              <td>QTY</td>
              <td>PRICE</td>
            </tr>
            <tr class='itemlisting'>
              <td>ITEM</td>
              <td>QTY</td>
              <td>PRICE</td>
            </tr>
            <tr class='itemlisting'>
              <td>ITEM</td>
              <td>QTY</td>
              <td>PRICE</td>
            </tr>
          </table>
          <table class='sumsup'>
            <tr class='grandtotal'>
              <td>
                <div class='paymentname'>JOHN SMITH</div>
                <div class='paymentcardtype'>VISA</div>
                <div class='paymentlastfour'>XXXX-XXXX-XXXX-1234</div>
              </td>
              <td>
                <div class='shippingmethod'>IN-STORE PICKUP</div>
                <div class='shippingname'>JOHN SMITH</div>
                <div class='shippingaddress1'>58 E WALTON STREET</div>
                <div class='shippingaddress2'>CHICAGO, IL 60611</div>
              </td>
              <td>
                <div class='totalvalue'>{{GRANDTOTAL}}</div>
                <div class='valuenote'>including any taxes and shipping, if applicable.</div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class='footer'>
        <div class='logoside'>
          <img class='burdilogoimage' src='https://www.burdiclothing.com/images/mail/logo-red.png'>
        </div>
        <div class='detailsside'>58 E Walton Street, Chicago, IL 60611</div>
        <div class='phoneside'>312-642-9166</div>
        <div class='websiteside'>
          <a href='burdiclothing.com'>burdiclothing.com</a>
        </div>
      </div>
    </div>
  </body>
</html>