Sass Specificity

Sass (SCSS) Specificity Calculator Utility to calculate (and display) specificity or specificity map of any valid simple/compound/complex selector via mixin or function. If given a selector list, the highest specificity map/value will be displayed.

Usage

@include 'path/to/_specificity';

// As a mixin
figure .out > select.or[specificity] {
  @include specificity; // specificity: 0, 3, 2;
                        // specificity-value: 770;
}

// As a function
a.head #of + time {
  $this-specificity-map: specificity(&); // 1, 1, 2
  $this-specificity-value: specificity(&, true); // 65794
}