OPGWdr

feature-helpers.scss

@mixin js--enabled() {
  @at-root html.js #{&} {
    @content;
  }
}
 
@mixin js--disabled() {
  @at-root html.no-js #{&} {
    @content
  }
}

index.haml

%div.container
  %span.with-js JS is available
  %span.without-js JS is not available

OPGWdr.markdown

OPGWdr

A Pen by Matt Vanderpol on CodePen.

License.

style.scss

@mixin js--enabled() {
  @at-root html.js #{&} {
    @content;
  }
}

@mixin js--disabled() {
  @at-root html.no-js #{&} {
    @content
  }
}

.container {
  padding: 30px;
  
  .with-js, .without-js {
    display: none;
  }
  
  @include js--enabled() {
    .with-js {
      display: block;
    }
  }
  
  @include js--disabled() {
    .without-js {
      display: block;
    }
  }
}