Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----

@import compass

// What is this? 
$brand-primary: #333

// What is this? 
=pane-primary
  +box-shadow(3px 3px 5px rgba(black, .15))
  +border-radius(10px)
  padding: 10px
  clear: both



.parent-class
  border: 1px solid red
  +pane-primary
  &.some-class
    // what does the "&" do here?
    color: blue
  .hasModernizr &
    // what does the "&" do here?
    color: white
    
// BONUS ROUND:
// Lighten the color red by 5%

SassMeister-output.css

.parent-class {
  border: 1px solid red;
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  padding: 10px;
  clear: both;
}
.parent-class.some-class {
  color: blue;
}
.hasModernizr .parent-class {
  color: white;
}