Variables and Nesting

SassMeister-input-HTML.html

<h1>DRY Your Code With Nesting and Variables</h1>
<article id="firstPanel" class="panel">
    <h3>Panel 1</h3>
    <div class="block"></div>
</article><!--

--><article id="secondPanel" class="panel">
    <h3>Panel 2</h3>
    <div class="block"></div>
</article><!--

--><article id="thirdPanel" class="panel">
    <h3>Panel 3</h3>
    <div class="block"></div>
</article>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

body{
    background-color: #505050;
}

h1,h2,h3{
    text-align: center;
    color: white;
    font-family: Helvetica;
}

.panel {
    height: 225px;
    display: inline-block;
    vertical-align: top;
}

.block{
    margin: 60px auto 0 auto;
    width: 50px;
    height: 50px;
}

#firstPanel{
    background-color: #FF7400; //orange
    width: 25%;
    margin-left: 30px;
}

    #firstPanel .block{
        background-color: #009999; //blue
    }

#secondPanel{
    background-color: #00CC00; //green
    width: 30%;
}
    
    #secondPanel .block{
        background-color: #FF7400; //orange
    }

#thirdPanel{
    width: 40%;
    background-color: #009999; //blue
}

    #thirdPanel .block {
        background-color: #00CC00; //green
    }

SassMeister-output.css

body {
  background-color: #505050;
}

h1, h2, h3 {
  text-align: center;
  color: white;
  font-family: Helvetica;
}

.panel {
  height: 225px;
  display: inline-block;
  vertical-align: top;
}

.block {
  margin: 60px auto 0 auto;
  width: 50px;
  height: 50px;
}

#firstPanel {
  background-color: #FF7400;
  width: 25%;
  margin-left: 30px;
}

#firstPanel .block {
  background-color: #009999;
}

#secondPanel {
  background-color: #00CC00;
  width: 30%;
}

#secondPanel .block {
  background-color: #FF7400;
}

#thirdPanel {
  width: 40%;
  background-color: #009999;
}

#thirdPanel .block {
  background-color: #00CC00;
}

SassMeister-rendered.html

<h1>DRY Your Code With Nesting and Variables</h1>
<article id="firstPanel" class="panel">
    <h3>Panel 1</h3>
    <div class="block"></div>
</article><!--

--><article id="secondPanel" class="panel">
    <h3>Panel 2</h3>
    <div class="block"></div>
</article><!--

--><article id="thirdPanel" class="panel">
    <h3>Panel 3</h3>
    <div class="block"></div>
</article>