Generated by SassMeister.com.

SassMeister-input-HTML.html

<header id="siteHeader" class="defaultHead">
  Header
</header>

<div id="siteContainer">
  <div id="siteContent" class="twoColumn">
    <section id="upperMainColumn" role="main" class="contentWell">
      UpperMain
    </section>
    <aside id="upperRightColumn">upper right. Must be 300px wide</aside>
    <!--<section id="mainColumn">Lower Main</section>
    <aside id="rightColumn">Lower Right</aside>-->
  </div>
</div>

<footer id="siteFooter">Footer</footer>

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// Foundation (v5.5.1)
// ----

$include-html-classes: false;
$include-print-styles: false;
$include-html-global-classes: true;

@import
"foundation/components/global",
"foundation/components/grid",
"foundation/components/type";

#siteHeader, #siteContent, #siteFooter{
  @include grid-row();
  position:relative; //Needed for the fixed right column hack
}

@media #{$small-only}{
  #upperMainColumn, #mainColumn{@include grid-column(12);}
  #upperRightColumn, #rightColumn{@include grid-column(12);}
}
@media #{$medium-up}{
  #upperMainColumn, #mainColumn{
    @include grid-column(12);padding:0 rem-calc(340) 0 $column-gutter;
    background-color:lavender;  
  }
  #upperRightColumn, #rightColumn{
    width:rem-calc(330);padding:0 $column-gutter 0 $column-gutter/2;position: absolute;right:0;
    background-color:pink;  
  }
}

SassMeister-output.css

meta.foundation-version {
  font-family: "/5.5.0/";
}

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0;
}

meta.foundation-mq-small-only {
  font-family: "/only screen and (max-width: 40em)/";
  width: 0;
}

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em;
}

meta.foundation-mq-medium-only {
  font-family: "/only screen and (min-width:40.063em) and (max-width:64em)/";
  width: 40.063em;
}

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em;
}

meta.foundation-mq-large-only {
  font-family: "/only screen and (min-width:64.063em) and (max-width:90em)/";
  width: 64.063em;
}

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em;
}

meta.foundation-mq-xlarge-only {
  font-family: "/only screen and (min-width:90.063em) and (max-width:120em)/";
  width: 90.063em;
}

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em;
}

meta.foundation-data-attribute-namespace {
  font-family: false;
}

html, body {
  height: 100%;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  font-size: 100%;
}

body {
  background: #fff;
  color: #222;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  position: relative;
  cursor: auto;
}

a:hover {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

img {
  -ms-interpolation-mode: bicubic;
}

#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object {
  max-width: none !important;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.hide {
  display: none !important;
  visibility: hidden;
}

.invisible {
  visibility: hidden;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: inline-block;
  vertical-align: middle;
}

textarea {
  height: auto;
  min-height: 50px;
}

select {
  width: 100%;
}

#siteHeader, #siteContent, #siteFooter {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem;
  position: relative;
}
#siteHeader:before, #siteHeader:after, #siteContent:before, #siteContent:after, #siteFooter:before, #siteFooter:after {
  content: " ";
  display: table;
}
#siteHeader:after, #siteContent:after, #siteFooter:after {
  clear: both;
}

@media only screen and (max-width: 40em) {
  #upperMainColumn, #mainColumn {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    width: 100%;
    float: left;
  }

  #upperRightColumn, #rightColumn {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    width: 100%;
    float: left;
  }
}
@media only screen and (min-width: 40.063em) {
  #upperMainColumn, #mainColumn {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    width: 100%;
    float: left;
    padding: 0 21.25rem 0 1.875rem;
    background-color: lavender;
  }

  #upperRightColumn, #rightColumn {
    width: 20.625rem;
    padding: 0 1.875rem 0 0.9375rem;
    position: absolute;
    right: 0;
    background-color: pink;
  }
}

SassMeister-rendered.html

<header id="siteHeader" class="defaultHead">
  Header
</header>

<div id="siteContainer">
  <div id="siteContent" class="twoColumn">
    <section id="upperMainColumn" role="main" class="contentWell">
      UpperMain
    </section>
    <aside id="upperRightColumn">upper right. Must be 300px wide</aside>
    <!--<section id="mainColumn">Lower Main</section>
    <aside id="rightColumn">Lower Right</aside>-->
  </div>
</div>

<footer id="siteFooter">Footer</footer>