Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="component component--tree" data-component="tree">
  <section class="component__header component__header--tree--medium" data-region="header">
    <h1>Header</h1>
  </section>
  <section class="component__content  component__content--tree" data-region="body">
    <div>Body</div>
  </section>
  <section class="component__footer  component__footer--tree" data-region="footer">
    <h4>Footer</h4>
  </section>
</div>

SassMeister-input.scss

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

/// Block Element
/// @access public
/// @param {String} $element - Element's name
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

/// Block Modifier
/// @access public
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

.component {
    background-color: red;
    padding: 20px;
    margin: 20px auto;
    width: 80%;
    font-family: Arial;
    
    @include modifier('tree') {
         background-color: #ececec;
    }
    
    @include element('header') {
       background-color: lightgreen;
       padding: 20px;
       margin-bottom: 20px;
        h1 {
            border-bottom: 1px solid #000;
        }
        
        @include modifier('tree') {
          background-color: #1cec1c;
          h1 {
              color: white;
              border-bottom: 1px solid white;
          }
     
          @include modifier('medium') {
              h1 {
                font-size: 36px;
              }
          }
        }
      }
      
    @include element('content') {
      background-color: lightgreen;
      padding: 20px;
      margin-bottom: 20px;
    }
    
    @include element('footer') {
        background-color: lightgreen;
        padding: 20px;
        h4 {
            border-bottom: 1px solid #000;
        }
        
        @include modifier('tree') {
        background-color: #9cec1c;
          h4 {
              color: white;
              border-bottom: none;
          }
        }
    }
}

SassMeister-output.css

.component {
  background-color: red;
  padding: 20px;
  margin: 20px auto;
  width: 80%;
  font-family: Arial;
}

.component--tree {
  background-color: #ececec;
}

.component__header {
  background-color: lightgreen;
  padding: 20px;
  margin-bottom: 20px;
}

.component__header h1 {
  border-bottom: 1px solid #000;
}

.component__header--tree {
  background-color: #1cec1c;
}

.component__header--tree h1 {
  color: white;
  border-bottom: 1px solid white;
}

.component__header--tree--medium h1 {
  font-size: 36px;
}

.component__content {
  background-color: lightgreen;
  padding: 20px;
  margin-bottom: 20px;
}

.component__footer {
  background-color: lightgreen;
  padding: 20px;
}

.component__footer h4 {
  border-bottom: 1px solid #000;
}

.component__footer--tree {
  background-color: #9cec1c;
}

.component__footer--tree h4 {
  color: white;
  border-bottom: none;
}

SassMeister-rendered.html

<div class="component component--tree" data-component="tree">
  <section class="component__header component__header--tree--medium" data-region="header">
    <h1>Header</h1>
  </section>
  <section class="component__content  component__content--tree" data-region="body">
    <div>Body</div>
  </section>
  <section class="component__footer  component__footer--tree" data-region="footer">
    <h4>Footer</h4>
  </section>
</div>