Alert users about using a deprecated selector

SassMeister-input-HTML.html

<h1 class="foo">Lorem ipsum dolor sit amet.</h1>

<p class="error">Lorem ipsum dolor sit amet.</p>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

// Make sure we have a way to turn debugging on/off.
$debug: true;

@if ($debug == true) {

  // List of selectors that we’re deprecating (and their replacements, if any).
  $deprecated-selectors: (
    '.foo': null,
    '.error': '.c-message .c-message--error'
  );

  // Create a placeholder to DRY out any of our shared styles.
  %deprecated-selectors-shared-styles {
    position: relative;
    outline: 1px solid orange;
        
    &:after {
      position: absolute;
      bottom: 100%;
      left: 0;
      font: normal 12px/1 monospace;
      white-space: nowrap;
      background-color: white;
      color: orange;
    }

  }
  
  @each $selector, $replacement in $deprecated-selectors {
    #{$selector} {

      // Share the cosmetic styles rather than repeat them per selector.
      @extend %deprecated-selectors-shared-styles;

      &:after {
        @if ($replacement != null) {
          /**
           * If we have a replacement selector, tell people what it is.
           */
          content: "WARN: Selector `#{$selector}` is deprecated, use `#{$replacement}` instead.";
        } @else {
          /**
           * If we have no replacement, just tell people to stop using the
           * selector.
           */
          content: "WARN: Selector `#{$selector}` is deprecated.";
        }
      }
    }
  }

}

SassMeister-output.css

.foo, .error {
  position: relative;
  outline: 1px solid orange;
}
.foo:after, .error:after {
  position: absolute;
  bottom: 100%;
  left: 0;
  font: normal 12px/1 monospace;
  white-space: nowrap;
  background-color: white;
  color: orange;
}

.foo:after {
  /**
   * If we have no replacement, just tell people to stop using the
   * selector.
   */
  content: "WARN: Selector `.foo` is deprecated.";
}

.error:after {
  /**
   * If we have a replacement selector, tell people what it is.
   */
  content: "WARN: Selector `.error` is deprecated, use `.c-message .c-message--error` instead.";
}

SassMeister-rendered.html

<h1 class="foo">Lorem ipsum dolor sit amet.</h1>

<p class="error">Lorem ipsum dolor sit amet.</p>