Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="projectinfo black-bg">
  <h1>Testing</h1>
  
  <div class="child-element">
    <p>This is the content for the child element</p>
  </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----


.projectinfo,
.profileinfo {
    color: #999;
    
    &.black-bg {
      background: #333;
      
      h1 {
        color: red;
      }
    }
    
    .child-element {
      color: #fff;
      background: rgba(95,162,219,0.5);
    }
  }

SassMeister-output.css

.projectinfo,
.profileinfo {
  color: #999;
}

.projectinfo.black-bg,
.profileinfo.black-bg {
  background: #333;
}

.projectinfo.black-bg h1,
.profileinfo.black-bg h1 {
  color: red;
}

.projectinfo .child-element,
.profileinfo .child-element {
  color: #fff;
  background: rgba(95, 162, 219, 0.5);
}

SassMeister-rendered.html

<div class="projectinfo black-bg">
  <h1>Testing</h1>
  
  <div class="child-element">
    <p>This is the content for the child element</p>
  </div>
</div>