Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="main-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Awards</a></li>
</ul>

<ul class="sidebar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Awards</a></li>
</ul>

<ul class="footer-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Awards</a></li>
</ul>

<ul class="demo-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Awards</a></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// ----

@import "compass";

// Variables
$root-font-size: 10px !default;
$base-link-color: white !default;
$base-link-bg: #74e7ed !default;

// Override Compass
$base-font-size: 1.4rem;
$base-line-height: 2.1rem;

// List Module

%list {
  > li {}
  a {
    font-weight: bold;
    //background-color: $base-link-bg;
    display: block;
    padding: $base-line-height / 2 3.5rem;
    transition: background-color 0.2s ease;
    // &:hover {
    //   background: darken($base-link-bg, 10%);
    // }
  }
}

%list-inline {
  overflow: hidden;
  @extend %list;
  > li {
    float: left;
  }
}

//Mixins
@mixin list($base: list,$color: $base-link-color,$bg: $base-link-bg,$method: darken){
  & {
    @extend %#{$base};
    
    li {
      @content;  
    }
    
    a {
      background: $bg;
      color: $color;
      &:hover {
        @if ($method == darken) {
          background: darken($bg, 10%);
        }
        @else {
          background: lighten($bg, 10%);
        }
      }
    }
  }
}

@mixin border-box-sizing() {
  *, *:before, *:after {
    box-sizing: border-box;
  }
}


// Start of Styling

//Base

@include border-box-sizing;

//Reset everything just for demo
* {
  margin: 0;
  padding: 0;
}

html {
  font-size: $root-font-size;
}

body {
  font-size: $base-font-size;
  line-height: $base-line-height;
  font-family: "Helvetica Neue", sans-serif;
  background: #f2d7ba;
  padding: 0;
}

a {
  text-decoration: none;
  color: $base-link-color;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 $base-line-height;
}


.main-nav{
  @include list($base: list-inline, $bg: #b4e881);
}

.sidebar-nav {
  @include list;
}

.footer-nav {
  @include list(list-inline, #444, #cfa, lighten);
}

.demo-nav {
  @include  list($base: list-inline) {
    border-right: 1px solid darken($base-link-bg, 5%);
    
    &:last-child {
      border: none;
    }
  }
}

SassMeister-output.css

.main-nav a, .footer-nav a, .demo-nav a, .sidebar-nav a {
  font-weight: bold;
  display: block;
  padding: 1.05rem 3.5rem;
  transition: background-color 0.2s ease;
}

.main-nav, .footer-nav, .demo-nav {
  overflow: hidden;
}
.main-nav > li, .footer-nav > li, .demo-nav > li {
  float: left;
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
}

body {
  font-size: 1.4rem;
  line-height: 2.1rem;
  font-family: "Helvetica Neue", sans-serif;
  background: #f2d7ba;
  padding: 0;
}

a {
  text-decoration: none;
  color: white;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 2.1rem;
}

.main-nav a {
  background: #b4e881;
  color: white;
}
.main-nav a:hover {
  background: #9ae056;
}

.sidebar-nav a {
  background: #74e7ed;
  color: white;
}
.sidebar-nav a:hover {
  background: #47dfe7;
}

.footer-nav a {
  background: #ccffaa;
  color: #444444;
}
.footer-nav a:hover {
  background: #ebffdd;
}

.demo-nav li {
  border-right: 1px solid #5de3ea;
}
.demo-nav li:last-child {
  border: none;
}
.demo-nav a {
  background: #74e7ed;
  color: white;
}
.demo-nav a:hover {
  background: #47dfe7;
}

SassMeister-rendered.html

<ul class="main-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Awards</a></li>
</ul>

<ul class="sidebar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Awards</a></li>
</ul>

<ul class="footer-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Awards</a></li>
</ul>

<ul class="demo-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Awards</a></li>
</ul>