Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="foo">
  <div>
    <div class="foo__bar">Foo</div>
  </div>
</div>

SassMeister-input.scss

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

$nudge-enabled: false;

// _tools.nudge.scss

$nudge-enabled: true !default;

@if ($nudge-enabled == false) {
  @warn "You have included Nudge in your project but have turned it off. Are you sure this is correct?"
}

// This is a private mixin for use only by the Nudge library.
// It simply spits out the styles for the message that gets
// displayed in the UI.
@mixin _nudge-message($level: 'error') {

  $color: orange;

  @if ($level == 'error') {
    $color: red;
  }

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

// Nudge mixin to check the validity of the nesting of elements in
// the DOM. E.g.: `.foo__bar` must always exist somewhere inside of
// `.foo`; we can ensure that developers are not using `.foo__bar`
// out of context by asking Nudge to check it.
//
// .example {
//   display: block;
//   padding: 2em;
// }
//
//   .example__child {
//     @include nudge-nest('.example');
//     font-size: 1em;
//   }
@mixin nudge-nest($element) {
@if ($nudge-enabled == true) {
    /**
     * Immediately apply error states to all instances of the element…
     */
    @include _nudge-message();
    
    &:after {
      content: "Error: Element `." attr(class) "` should only appear within `#{$element}`.";
    }

    /**
     * …but remove the errors if things are nested correctly.
     */
    #{$element} & {
      outline: none;
      &:after {
        content: normal;
      }
    }
} //endif
}





// _trumps.nudge.scss
@if ($nudge-enabled == true) {
/**
 * Improper use of BEM Modifiers.
 *
 * By checking whether a class attribute contains two hyphens but no  space
 * (i.e. there’s only one class and it’s a Modifier), tell the developer that
 * they can’t use a Modifier without a corresponding Block.
 *
 * 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*=" "]) {
  @include _nudge-message();
    
  &:after {
    content: "Error: Cannot have a Modifier (i.e. `." attr(class) "`) without a Block.";
  }

}
} //endif






@if ($nudge-enabled == true) {
/**
 * Deprecated Selectors
 *
 * Sometimes we will want to deprecate and/or phase out certain selectors.
 * We can define a list of these selectors (with optional replacements)
 * that will display a warning in the UI when used.
 */
// Array of our selectors and their replacements. If there is no replacement,
// use `null`.
//
// The array below is an example: do not modify it directly. Instead, replicate
// it elsewhere earlier in the project (e.g. in a `_settings.deprecations.scss`
// file).
$nudge-deprecated-selectors: (
  '.deprecated-class': '.replacement-class',
  '.deprecated-class-with-no-replaement': null,
) !default;

%_nudge-deprecated-selectors-shared-styles {
  @include _nudge-message('warn');
}

@each $selector, $replacement in $nudge-deprecated-selectors {
  #{$selector} {
    @extend %_nudge-deprecated-selectors-shared-styles;

  &:after {
    @if ($replacement != null) {
      content: "Warn: Selector `#{$selector}` is deprecated, use `#{$replacement}` instead.";
    } @else {
      content: "Warn: Selector `#{$selector}` is deprecated.";
    }
  }

  }
}
} //endif

SassMeister-output.css

@charset "UTF-8";
/**
 * Improper use of BEM Modifiers.
 *
 * By checking whether a class attribute contains two hyphens but no  space
 * (i.e. there’s only one class and it’s a Modifier), tell the developer that
 * they can’t use a Modifier without a corresponding Block.
 *
 * 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 {
  position: absolute;
  bottom: 100%;
  left: 0;
  font: normal 12px/1 monospace;
  white-space: nowrap;
  background-color: white;
  color: red;
}
[class*="--"]:not([class*=" "]):after {
  content: "Error: Cannot have a Modifier (i.e. `." attr(class) "`) without a Block.";
}

/**
 * Deprecated Selectors
 *
 * Sometimes we will want to deprecate and/or phase out certain selectors.
 * We can define a list of these selectors (with optional replacements)
 * that will display a warning in the UI when used.
 */
.deprecated-class, .deprecated-class-with-no-replaement {
  position: relative;
  outline: 1px solid orange;
}
.deprecated-class:after, .deprecated-class-with-no-replaement:after {
  position: absolute;
  bottom: 100%;
  left: 0;
  font: normal 12px/1 monospace;
  white-space: nowrap;
  background-color: white;
  color: orange;
}

.deprecated-class:after {
  content: "Warn: Selector `.deprecated-class` is deprecated, use `.replacement-class` instead.";
}

.deprecated-class-with-no-replaement:after {
  content: "Warn: Selector `.deprecated-class-with-no-replaement` is deprecated.";
}

SassMeister-rendered.html

<div class="foo">
  <div>
    <div class="foo__bar">Foo</div>
  </div>
</div>