Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="foo--bar">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) {

  /**
   * If an element has a class attribute containing two hyphens but no space
   * (i.e. only one class is being used, and it’s a Modifier), provide visual
   * feedback in the DOM.
   *
   * N.B. This isn’t bulletproof: `class="foo--bar baz"` would pass, as would
   *      `class=" foo--bar"`. Use with a pinch of salt.
   */
  [class*="--"]:not([class*=" "]) {
    position: relative;
    outline: 1px solid red;
      
    &:after {
      content: "ERROR: Cannot have a Modifier (i.e. `." attr(class) "`) without a Block.";
      position: absolute;
      bottom: 100%;
      left: 0;
      font-family: monospace;
      white-space: nowrap;
      background-color: white;
      color: red;
    }
  
  }

}

SassMeister-output.css

@charset "UTF-8";
/**
 * If an element has a class attribute containing two hyphens but no space
 * (i.e. only one class is being used, and it’s a Modifier), provide visual
 * feedback in the DOM.
 *
 * N.B. This isn’t bulletproof: `class="foo--bar baz"` would pass, as would
 *      `class=" foo--bar"`. Use with a pinch of salt.
 */
[class*="--"]:not([class*=" "]) {
  position: relative;
  outline: 1px solid red;
}
[class*="--"]:not([class*=" "]):after {
  content: "ERROR: Cannot have a Modifier (i.e. `." attr(class) "`) without a Block.";
  position: absolute;
  bottom: 100%;
  left: 0;
  font-family: monospace;
  white-space: nowrap;
  background-color: white;
  color: red;
}

SassMeister-rendered.html

<p class="foo--bar">Lorem ipsum dolor sit amet.</p>