Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="widget">
  <div class="widget__cog">Cog</div>
</div>

SassMeister-input.scss

/// Demonstrate how using the `@content` directive in an empty mixin
/// can be a handy tool to group related styles.
///
/// Below example is very arbitrary, but demonstrates possibilities of
/// including a mixin without being inside a selector.
///
/// @author John D Wells
@mixin t-group() {
  @content;
}

@include t-group() {
  .widget {
    background-color: blue;
  }
  .widget__cog {
    padding: 20px;
    color: white;
  }
}

SassMeister-output.css

.widget {
  background-color: blue;
}

.widget__cog {
  padding: 20px;
  color: white;
}

SassMeister-rendered.html

<div class="widget">
  <div class="widget__cog">Cog</div>
</div>