Generated by SassMeister.com.

SassMeister-input-HTML.html

<header class="header" role="banner">
  <div class="header-wrapper">
    <h1 class="brand">One|North</h1>
  </div>
</header>

<div class="container">
  
  <div class="dashboard is-shifted">
    
  </div>
  
  <nav class="nav--menu">
    <ul class="nav-list">
      <li class="nav-list__item nav-list__item--trigger">
        <button class="nav-close" type="button"><-</button>
      </li>
      <li class="nav-list__item is-active">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Dashboard
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          People
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Main Content Types
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Experience
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Users
        </a>
      </li>
    </ul>
  </nav>
  
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.2)
// ----

$body-font-stack: sans-serif;
$color-brand: #990000;
$color-white: #FAFAFA;
$color-dark-grey: #3D3D3D;
$color-transparent: rgba(0,0,0,0);
$color-text: #B4B4B4;
$color-icon: $color-text;
$color-border: rgba(255,255,255,0.1);

body {
  font-family: $body-font-stack;
  line-height: 1.4;
}

.header {
 background: $color-brand;
 color: $color-white;
}

.header-wrapper {
  padding: 1em;
}

.brand {
  margin: 0;
  font-size: 1.5em;
}

.container {
  min-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

.dashboard {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0.5em 2em;
  transform: translateX(60px);
  background: $color-white;
  border-left: 16px solid $color-dark-grey;
  z-index: 2;
  
  &.is-shifted {
    transform: translateX(300px);
  }
}

.nav--menu {
  position: absolute;
  width: 300px;
  height: 100%;
  background: $color-dark-grey;
  z-index: 1;
}

.nav-list {
  width: 90%;
  list-style-type: none;
  list-style-position: outside;
  margin: 0 auto;
  padding: 0;
}

.nav-list__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid $color-border;
  
  &:first-child {
    border: 0;
  }
}

.nav-list__link {
  display: inline-block;
  padding: 16px 0;
  color: $color-white;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 2;
}

.nav-close {
  width: 32px;
  padding: 16px 0;
  border: 0;
  font-size: 1.5em;
  background: $color-transparent;
  color: $color-white;
}

// this is just to fake the icon
.nav-icon {
  float: left;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  margin-right: 1em;
  background: $color-white;
  border-radius: 50%;
}

SassMeister-output.css

body {
  font-family: sans-serif;
  line-height: 1.4;
}

.header {
  background: #990000;
  color: #FAFAFA;
}

.header-wrapper {
  padding: 1em;
}

.brand {
  margin: 0;
  font-size: 1.5em;
}

.container {
  min-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

.dashboard {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0.5em 2em;
  transform: translateX(60px);
  background: #FAFAFA;
  border-left: 16px solid #3D3D3D;
  z-index: 2;
}

.dashboard.is-shifted {
  transform: translateX(300px);
}

.nav--menu {
  position: absolute;
  width: 300px;
  height: 100%;
  background: #3D3D3D;
  z-index: 1;
}

.nav-list {
  width: 90%;
  list-style-type: none;
  list-style-position: outside;
  margin: 0 auto;
  padding: 0;
}

.nav-list__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-list__item:first-child {
  border: 0;
}

.nav-list__link {
  display: inline-block;
  padding: 16px 0;
  color: #FAFAFA;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 2;
}

.nav-close {
  width: 32px;
  padding: 16px 0;
  border: 0;
  font-size: 1.5em;
  background: transparent;
  color: #FAFAFA;
}

.nav-icon {
  float: left;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  margin-right: 1em;
  background: #FAFAFA;
  border-radius: 50%;
}

SassMeister-rendered.html

<header class="header" role="banner">
  <div class="header-wrapper">
    <h1 class="brand">One|North</h1>
  </div>
</header>

<div class="container">
  
  <div class="dashboard is-shifted">
    
  </div>
  
  <nav class="nav--menu">
    <ul class="nav-list">
      <li class="nav-list__item nav-list__item--trigger">
        <button class="nav-close" type="button"><-</button>
      </li>
      <li class="nav-list__item is-active">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Dashboard
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          People
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Main Content Types
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Experience
        </a>
      </li>
      <li class="nav-list__item">
        <a class="nav-list__link" href="#">
          <span class="nav-icon"></span>
          Users
        </a>
      </li>
    </ul>
  </nav>
  
</div>