Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav class="nav-collapse">
        <ul class="nav-collapse">
            <li><a href="#">Home</a></li>
            <li><a href="#">Bilder</a></li>
            <li><a href="#">Rezepte</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
        <a href"#" id="pull">Menu</a>
  </nav>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$font-title: "lavanderia_regular", Georgia, serif;
$font-paragraph: "muli_regular", Helvetica, Verdana,serif;
$pink:#FF606E;
$pinklight:#FF7B8A;
$background:yellow;
$bluelight:#a7dbdb;
$blue:#69d2e7;
$darkblue:#517398;
$extraDarkBlue:#262C3A;
$navbarblue: rgba(38 , 44 , 58, 0.1);

@mixin font-face($family, $path, $svg, $weight: normal, $style: normal){
    @font-face {
        font-family: $family;
        src: url('#{$path}.eot');
        src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff2') format('woff2'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg');
        font-weight: $weight;
        font-style: $style; 
    }
}

@mixin title-style{
    font-family: $font-title;
    font-weight: bold;
}

@mixin paragraph-style{
    font-family: $font-paragraph;
    font-size: 12px;
}

@include font-face('lavanderia_regular', '../fonts/lavanderia_regular', 'lavanderia_regular');
@include font-face('abrahamlincoln', '../fonts/abrahamlincoln', 'abrahamlincoln');
@include font-face('mission_script', '../fonts/mission_script', 'mission_script');
@include font-face('muli_regular', '../fonts/muli_regular', 'muli_regular');
@include font-face('oil_can', '../fonts/oil_can', 'oil_can');

body{
    padding: 0;
    margin: 0;
    font-family: $font-paragraph;
    font-size: 12px;
    background-color: $background;
}

.nav-collapse {
    height: 35px;
    position: relative;
    width: 100%;
    text-align: center;
    // Adds shadow to the bottom of the bar
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    // Adds the transparent background
    background-color: $navbarblue;
    color: rgba(1, 1, 1, 0.8);
    *zoom: 1;

    ul{
        padding: 0;
        margin: 0 auto;
        width: 400px;
        height: 35px;
    }

    li{
        float: left;
        display: inline;
    }

    a{
        @include title-style;
        display: inline-block;
        width: 100px;
        cursor: pointer;
        font-size: 18px;
        color: $bluelight;
        text-decoration: none;
        text-align: center;
        line-height: 35px;

        &:hover{
            color: $blue;
        }
    }
    &:before, &:after{
        content: " ";
        display: table;
    }
    &:after{
        clear: both;
    }
}

#pull{
    display: none;
}

.content{
    @include paragraph-style;
    margin-top: 10px;
}

SassMeister-output.css

@font-face {
  font-family: "lavanderia_regular";
  src: url("../fonts/lavanderia_regular.eot");
  src: url("../fonts/lavanderia_regular.eot?#iefix") format("embedded-opentype"), url("../fonts/lavanderia_regular.woff2") format("woff2"), url("../fonts/lavanderia_regular.woff") format("woff"), url("../fonts/lavanderia_regular.ttf") format("truetype"), url("../fonts/lavanderia_regular.svg#lavanderia_regular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "abrahamlincoln";
  src: url("../fonts/abrahamlincoln.eot");
  src: url("../fonts/abrahamlincoln.eot?#iefix") format("embedded-opentype"), url("../fonts/abrahamlincoln.woff2") format("woff2"), url("../fonts/abrahamlincoln.woff") format("woff"), url("../fonts/abrahamlincoln.ttf") format("truetype"), url("../fonts/abrahamlincoln.svg#abrahamlincoln") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "mission_script";
  src: url("../fonts/mission_script.eot");
  src: url("../fonts/mission_script.eot?#iefix") format("embedded-opentype"), url("../fonts/mission_script.woff2") format("woff2"), url("../fonts/mission_script.woff") format("woff"), url("../fonts/mission_script.ttf") format("truetype"), url("../fonts/mission_script.svg#mission_script") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "muli_regular";
  src: url("../fonts/muli_regular.eot");
  src: url("../fonts/muli_regular.eot?#iefix") format("embedded-opentype"), url("../fonts/muli_regular.woff2") format("woff2"), url("../fonts/muli_regular.woff") format("woff"), url("../fonts/muli_regular.ttf") format("truetype"), url("../fonts/muli_regular.svg#muli_regular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "oil_can";
  src: url("../fonts/oil_can.eot");
  src: url("../fonts/oil_can.eot?#iefix") format("embedded-opentype"), url("../fonts/oil_can.woff2") format("woff2"), url("../fonts/oil_can.woff") format("woff"), url("../fonts/oil_can.ttf") format("truetype"), url("../fonts/oil_can.svg#oil_can") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {
  padding: 0;
  margin: 0;
  font-family: "muli_regular", Helvetica, Verdana, serif;
  font-size: 12px;
  background-color: yellow;
}

.nav-collapse {
  height: 35px;
  position: relative;
  width: 100%;
  text-align: center;
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  background-color: rgba(38, 44, 58, 0.1);
  color: rgba(1, 1, 1, 0.8);
  *zoom: 1;
}
.nav-collapse ul {
  padding: 0;
  margin: 0 auto;
  width: 400px;
  height: 35px;
}
.nav-collapse li {
  float: left;
  display: inline;
}
.nav-collapse a {
  font-family: "lavanderia_regular", Georgia, serif;
  font-weight: bold;
  display: inline-block;
  width: 100px;
  cursor: pointer;
  font-size: 18px;
  color: #a7dbdb;
  text-decoration: none;
  text-align: center;
  line-height: 35px;
}
.nav-collapse a:hover {
  color: #69d2e7;
}
.nav-collapse:before, .nav-collapse:after {
  content: " ";
  display: table;
}
.nav-collapse:after {
  clear: both;
}

#pull {
  display: none;
}

.content {
  font-family: "muli_regular", Helvetica, Verdana, serif;
  font-size: 12px;
  margin-top: 10px;
}

SassMeister-rendered.html

<nav class="nav-collapse">
        <ul class="nav-collapse">
            <li><a href="#">Home</a></li>
            <li><a href="#">Bilder</a></li>
            <li><a href="#">Rezepte</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
        <a href"#" id="pull">Menu</a>
  </nav>