Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
<header></header>
<section id="hero"></section>
<h2>photography &amp; design</h2>
<section id="services">
  <ul>
    <li><h3>portraits</h3></li>
    <li><h3>events</h3></li>
    <li><h3>maternity</h3></li>
    <li><h3>promotional</h3></li>
    <li><h3>logos</h3></li>
    <li><h3>identities</h3></li>
    <li><h3>marketing</h3></li>
    <li><h3>web design</h3></li>
  </ul>
</section>
<h2>latest blog post</h2>
<section id="latest-blog"></section>
<h2>contact</h2>
<section id="contact"></section>
<footer>
  <div class="inner-footer">
    <div class="social">
      <div class="icon one">1</div>
      <div class="icon two">2</div>
      <div class="icon three">3</div>
      <div class="icon four">4</div>
      <div class="icon five">5</div>
    </div>
    <div class="logo"></div>
    <div class="faqs-contact">
      <ul class="faqs">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor Sit</li>
        <li>Amet</li>
      </ul>
      <ul class="contact-list">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor Sit</li>
        <li>Amet</li>
      </ul>
    </div>
    <div class="login-faqs">
      <a href="#">Client Login</a>
      <a href="#">FAQ's</a>
    </div>
  </div>
  <div class="copyright">Red Cart Studios 2014</div>
</footer>
</div>

SassMeister-input.scss

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

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

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

$susy: (
  columns: 12,
  gutters: 1/2,
  math: fluid,
  output: float,
  gutter-position: split,
);

// VARIABLES
$red: #D00000;

$large-mobile:   481px;
$tablet:         786px;
$desktop:       1030px;
$large-desktop: 1240px;

h2 {
  background:#000;
  color:#FFF;
  line-height:1.5em;
  margin:0;
  text-align:center;
}
.container {
  @include container;
  
  @include breakpoint($tablet) {
    // @include container(80%);
  }
}

#hero {
  background: url('http://placehold.it/480x200') no-repeat center center;
  height:200px;
}

#services {
  @include clearfix;
  text-align:center;
  background:#666;
  color:white;
  
  ul {
    list-style:none;
    background:#AAA;
    
    @include breakpoint($tablet) {
      width:90%;
      margin:0 auto;
      padding:1em;
    }
    
    li {
      border-bottom:1px solid white;
      
      @include breakpoint($tablet) {
          &:first-child {
            border-left:none;
            border-top:none;
          }
        }
      
      h3 {
        padding:1em 0;
        
        
      }
    }
    @include breakpoint($tablet) {
      li {
        width:25%;
        float:left;
      }
    }
  }
}

#latest-blog {
  background-color:rgba(blue,.50);
  height:200px;
}

#contact {
  background-color:rgba(green,.50);
  height:200px;
}

.copyright {
  background:$red;
  color:white;
  text-align:center;
}

footer {
  position:relative;
}
.inner-footer {
  @include clearfix;
  background:#444;
  a {
    color:white;
  }
}
.social {
  text-align:center;
  line-height:100px;
  @include breakpoint($tablet) {
    @include span(5 of 12);
  }
  .one {
    @include span(1 of 5);
  }
  .two {
    @include span(1 of 5 at 2);
  }
  .three {
    @include span(1 of 5 at 3);
  }
  .four {
    @include span(1 of 5 at 4);
  }
  .five {
    @include span(1 of 5 at 5);
  }
}
.logo {
  display:none;
  @include breakpoint($tablet) {
    display:block;
    height:100px;
    background:url("http://placehold.it/100x100/D00000/FFF") no-repeat center center;
    @include span(2 of 12 at 6);
  }
}
.faqs-contact {
  display:none;
  @include span(5 of 12 at 8);
  
  @include breakpoint($tablet) {
    display:block;
  }
  ul {
    float:left;
    margin-bottom:0;
    
    li {
      list-style:none;
      
    }
  }
}
.login-faqs {
  text-align:center;
  
  @include breakpoint($tablet) {
    display:inline;
    position:absolute;
    bottom:0;
    right:0;
    a {
      margin: 0 1em;
    }
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h2 {
  background: #000;
  color: #FFF;
  line-height: 1.5em;
  margin: 0;
  text-align: center;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

#hero {
  background: url("http://placehold.it/480x200") no-repeat center center;
  height: 200px;
}

#services {
  overflow: hidden;
  *zoom: 1;
  text-align: center;
  background: #666;
  color: white;
}
#services ul {
  list-style: none;
  background: #AAA;
}
@media (min-width: 786px) {
  #services ul {
    width: 90%;
    margin: 0 auto;
    padding: 1em;
  }
}
#services ul li {
  border-bottom: 1px solid white;
}
@media (min-width: 786px) {
  #services ul li:first-child {
    border-left: none;
    border-top: none;
  }
}
#services ul li h3 {
  padding: 1em 0;
}
@media (min-width: 786px) {
  #services ul li {
    width: 25%;
    float: left;
  }
}

#latest-blog {
  background-color: rgba(0, 0, 255, 0.5);
  height: 200px;
}

#contact {
  background-color: rgba(0, 128, 0, 0.5);
  height: 200px;
}

.copyright {
  background: #d00000;
  color: white;
  text-align: center;
}

footer {
  position: relative;
}

.inner-footer {
  overflow: hidden;
  *zoom: 1;
  background: #444;
}
.inner-footer a {
  color: white;
}

.social {
  text-align: center;
  line-height: 100px;
}
@media (min-width: 786px) {
  .social {
    width: 38.88889%;
    float: left;
    margin-left: 1.38889%;
    margin-right: 1.38889%;
  }
}
.social .one {
  width: 13.33333%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}
.social .two {
  width: 13.33333%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}
.social .three {
  width: 13.33333%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}
.social .four {
  width: 13.33333%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}
.social .five {
  width: 13.33333%;
  float: right;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}

.logo {
  display: none;
}
@media (min-width: 786px) {
  .logo {
    display: block;
    height: 100px;
    background: url("http://placehold.it/100x100/D00000/FFF") no-repeat center center;
    width: 13.88889%;
    float: left;
    margin-left: 1.38889%;
    margin-right: 1.38889%;
  }
}

.faqs-contact {
  display: none;
  width: 38.88889%;
  float: right;
  margin-left: 1.38889%;
  margin-right: 1.38889%;
}
@media (min-width: 786px) {
  .faqs-contact {
    display: block;
  }
}
.faqs-contact ul {
  float: left;
  margin-bottom: 0;
}
.faqs-contact ul li {
  list-style: none;
}

.login-faqs {
  text-align: center;
}
@media (min-width: 786px) {
  .login-faqs {
    display: inline;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .login-faqs a {
    margin: 0 1em;
  }
}

SassMeister-rendered.html

<div class="container">
<header></header>
<section id="hero"></section>
<h2>photography &amp; design</h2>
<section id="services">
  <ul>
    <li><h3>portraits</h3></li>
    <li><h3>events</h3></li>
    <li><h3>maternity</h3></li>
    <li><h3>promotional</h3></li>
    <li><h3>logos</h3></li>
    <li><h3>identities</h3></li>
    <li><h3>marketing</h3></li>
    <li><h3>web design</h3></li>
  </ul>
</section>
<h2>latest blog post</h2>
<section id="latest-blog"></section>
<h2>contact</h2>
<section id="contact"></section>
<footer>
  <div class="inner-footer">
    <div class="social">
      <div class="icon one">1</div>
      <div class="icon two">2</div>
      <div class="icon three">3</div>
      <div class="icon four">4</div>
      <div class="icon five">5</div>
    </div>
    <div class="logo"></div>
    <div class="faqs-contact">
      <ul class="faqs">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor Sit</li>
        <li>Amet</li>
      </ul>
      <ul class="contact-list">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor Sit</li>
        <li>Amet</li>
      </ul>
    </div>
    <div class="login-faqs">
      <a href="#">Client Login</a>
      <a href="#">FAQ's</a>
    </div>
  </div>
  <div class="copyright">Red Cart Studios 2014</div>
</footer>
</div>