Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="terminal-window">
  <div class="navbar">
    <div class="action close"><div class="circle"></div></div>
    <div class="action min"><div class="circle"></div></div>
    <div class="action full"><div class="circle"></div></div>
  </div>
  <div class="terminal">
    <p class="login">Last login: Thu Oct 23 11:31:12 on ttys000</p>
    <p class="user">
      <span class="username">joshkidd</span> <span>at</span> <span class="sys">Mac-mini</span> <span>in</span> <span class="dir">~</span>
    </p>
    <p class="newline">
    </p>
  </div>
</div>

SassMeister-input.scss

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

p { margin:0; font-family:'Monaco', sans-serif; }

.terminal-window {
  height:320px;
  
  width:50%;
  
  .navbar {
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    background-color:#e7e7e7;
    height:20px;
    padding:2px 8px;
    .action {
      display:block;
      float:left;
      padding:5px 3px;
      &.close {
        .circle { 
          background-color:#FF6058;
        }
      }
      &.min { 
        .circle { 
          background-color:#FFBF2F;
        } 
      }
      &.full {
        .circle {
          background-color:#28C940;
        }
      }
      .circle {
        content:"";
        display:block;
        height:10px;
        width:10px;
        border-radius:5px;
      }
    }
  }
  
  .terminal {
    background-color:#000;
    height:300px;
    overflow-y:scroll;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    p {
      font-size:14px;
      display:block;
      padding:3px 10px;
      color:#bbb;
      &.newline {
        &:before {
          content: "$";
          display:block;
          float:left;
          color:darken(#bbb, 20%);
        }
      }
      
      &.user {
        color:darken(#bbb, 10%);
        .username {
          color:#FD6954;
        }
        .sys {
          color:#E18F0A;
        }
        .dir {
          color:#D5F804;
        }
        span {
          color:darken(#bbb, 30%);
        }
      }
    }
  }
}

SassMeister-output.css

p {
  margin: 0;
  font-family: 'Monaco', sans-serif;
}

.terminal-window {
  height: 320px;
  width: 50%;
}
.terminal-window .navbar {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #e7e7e7;
  height: 20px;
  padding: 2px 8px;
}
.terminal-window .navbar .action {
  display: block;
  float: left;
  padding: 5px 3px;
}
.terminal-window .navbar .action.close .circle {
  background-color: #FF6058;
}
.terminal-window .navbar .action.min .circle {
  background-color: #FFBF2F;
}
.terminal-window .navbar .action.full .circle {
  background-color: #28C940;
}
.terminal-window .navbar .action .circle {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
}
.terminal-window .terminal {
  background-color: #000;
  height: 300px;
  overflow-y: scroll;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.terminal-window .terminal p {
  font-size: 14px;
  display: block;
  padding: 3px 10px;
  color: #bbb;
}
.terminal-window .terminal p.newline:before {
  content: "$";
  display: block;
  float: left;
  color: #888888;
}
.terminal-window .terminal p.user {
  color: #a2a2a2;
}
.terminal-window .terminal p.user .username {
  color: #FD6954;
}
.terminal-window .terminal p.user .sys {
  color: #E18F0A;
}
.terminal-window .terminal p.user .dir {
  color: #D5F804;
}
.terminal-window .terminal p.user span {
  color: #6e6e6e;
}

SassMeister-rendered.html

<div class="terminal-window">
  <div class="navbar">
    <div class="action close"><div class="circle"></div></div>
    <div class="action min"><div class="circle"></div></div>
    <div class="action full"><div class="circle"></div></div>
  </div>
  <div class="terminal">
    <p class="login">Last login: Thu Oct 23 11:31:12 on ttys000</p>
    <p class="user">
      <span class="username">joshkidd</span> <span>at</span> <span class="sys">Mac-mini</span> <span>in</span> <span class="dir">~</span>
    </p>
    <p class="newline">
    </p>
  </div>
</div>