Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="col1"></div>
</div>

SassMeister-input.scss

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

@mixin state($states, $parent: false) {
  @if ($current_block != false) {
    $selectors: null;
    @for $i from 1 through length($states) {
      $state: nth($states, $i);
      
      @if ($parent == true) {
        $selector: unquote("#{$current_block}#{$state} &");
      }
      @else {
        $selector: unquote("&#{$state}");
      }
      
      $glue: ',
      ';
      $selectors: $selectors#{$selector} #{$glue};
    }

    #{$selectors} {
      @content;
    }
  }
  @else {
    @warn "state mixin called outside of a block";
  }
}

@mixin element($element) {
  $current_block: #{&} !global;
  &__#{$element} {
    @content;
  }
  // Step out of the current module.
  $current_block: false !global;
}

.story-box {
  @include element(header) {
    font-weight: 500;
    @include state(':focus' ':hover' '--active', true) {
      text-decoration: underline;
    }
    
    @include state(':focus' '--test') {
      content: "Second argument to enable state on the block element, otherwise on element by default.";
    }
  }
}

SassMeister-output.css

.story-box__header {
  font-weight: 500;
}

.story-box:focus .story-box__header,
.story-box:hover .story-box__header,
.story-box--active .story-box__header {
  text-decoration: underline;
}

.story-box__header:focus,
.story-box__header--test {
  content: "Second argument to enable state on the block element, otherwise on element by default.";
}

SassMeister-rendered.html

<div class="container">
  <div class="col1"></div>
</div>