+override

Sometimes you need to increase selector specificity. And maybe ou have problem to count selector specificity but event better because this option is self-documenting the reason (selector) you are overriding with stronger specificity.

And if you do know what selectors are stronger but don't know which is the strongest, never mind, just mention all of them.

+override($selectors...)

$selectors...: one or more single, simple selectors - selector(s) which all of them the current selector have to overcome by (at least) 1 element specificity point.

SASS

+mode('draft')

+component('footer')
  +default
    color: black
    
  +state(':hover')
    +override('body.loading .footer')
        color: white

  +variant('.primary')
    +override('body.loading .footer', 'body.contact-page .footer.minimal')
        color: red

SCSS

@include mode('draft');

@include component('footer') {
  @include default {
    color: black;
  }

  @include state(':hover') {
    @include override('body.loading .footer') {
        color: white;
    }
  }

  @include variant('.primary') {
    @include override('body.loading .footer', 'body.contact-page .footer.minimal') {
        color: red;
    }
  }
}

SASS

+mode('strict')

+component('footer')
  +register
    +state(':hover')
    +variant('.primary')

  +default
    color: black
    
  +state(':hover')
    +override('body.loading .footer')
        color: white

  +variant('.primary')
    +override('body.loading .footer', 'body.contact-page .footer.minimal')
        color: red

SCSS

@include mode('strict');

@include component('footer') {
  @include register {
    @include state(':hover');
    @include variant('.primary');
  }  

  @include default {
    color: black;
  }

  @include state(':hover') {
    @include override('body.loading .footer') {
        color: white;
    }
  }
}

  @include variant('.primary') {
    @include override('body.loading .footer', 'body.contact-page .footer.minimal') {
        color: red;
    }
  }
}

#footer {
    color: black;
}


footer:hover:not(._):not(._) {
    color: black;
}

footer.primary:not(._):not(._):not(._) {
    color: red;
}

override($sel, $selectors...)

Function with same name as mixin above, which adds element specificity of given selector by a given number.

$sel: single, simple or combinator selector - a selector that will be increased its specificity.

$selectors...: one or more single, simple selectors - selector(s) which all of them the current selector have to overcome by (at least) 1 element specificity point.

---

Specificity is local for element

In SPOT CSS system is problem of selector specificity reduced only for single element, so it must be resolved only for a few element selectors, see Local specificity.

Specificity for whole component

If you want increase selector specificity for whole component, see How to increase component selector specificity.

---

See also

+add-element-specificity
+add-class-specificity
+add-id-specificity
+add-specificity