Bump specificity in CSS with Sass (from: https://www.sassmeister.com/gist/01743ade0575313d44b05ff5ca25c076)

bump-specificity.scss

// ----
// libsass (v3.5.4)
// ----

// A sass mixin to produce a specificity bump on a selector by chaining it
@mixin specificity-bump($specificity: 1) {
  $selector: "#{&}";
  
  @for $i from 1 through $specificity {
    $selector: $selector + "#{&}";
  }
  
  @at-root #{unquote($selector)} {
    @content;
  }
}

.foo {
  @include specificity-bump {
    color: red;
  }
}

#bar {
  @include specificity-bump(3) {
    color: blue;
  }
}

[baz] {
  @include specificity-bump(5) {
    color: green;
    
    &:not(input) {
      color: yellow;
    }
  }
}