Allows overriding existing styles with extreme specificity while keeping source code clean and readable. Only use this for overriding 3rd-party CSS that cannot be changed. Does not override !important or inline styles; those must be dealt with separately.
@include style-override($degree, $head-selector);Default:
1
The “force” of the override. Effectively the number of id-level selectors you need to override. If you need to override 4 ids then you would set this to 4.
Default:
#\\!
An id selector that matches the one on the <head> tag.
Note: This selector must select the
<head>tag. The default value selects<head id="!">which is short (since it’s prepended to every wrapped selector) and obscure (to help guarantee uniqueness). Since it’s a special character in CSS, the!must be escaped. Since the\is a special character in SCSS, the\for the!must be escaped as well.
.example {
@include style-override(4) {
background: red;
}
}#\!#\!#\!#\!#\! ~ body .example {
background: red;
}