On gists

SCSS: @at-root

SCSS

at-root-example.scss Raw #

// Sass
.Component {
  .title {
    color: black;
    
    .is-active#{&} {
      color: blue;
    }
  }
}

// shitty
.Component .title {
  color: black;
}
.Component .title .is-active.Component .title {
  color: blue;
}


// at-root ------------------------------ //
// sass
.Component {
  .title {
    color: black;
    
    @at-root .is-active#{&} {
      color: blue;
    }
  }
}
// css
.Component .title {
  color: black;
}
.is-active.Component .title {
  color: blue;
}



@mixin variant($selector) {
  @at-root #{$selector}#{&} {
    @content;
  }
}

.Component {
  .title {
    color: black;
    
    @include variant('.is-active') {
      color: blue;
    }
  }
}