PostCSS Inherit
Inherit plugin for PostCSS. Allows you to inherit all the rules associated with a given selector. Modeled after rework-inherit.
API
var postcss = ;var inherit = ;
Inherit(options{})
Option parameters:
propertyRegExp
- Regular expression to match the "inherit" at-rule. By default, it is/^(inherit|extend)s?:?$/i
, so it matches "inherit", "inherits", "extend", and "extends". For example, if you only want to allow theextend
keyword, set the regular expression to/^extend$/
.
Examples
Regular inherit
yields:
Multiple inherit
Inherit multiple selectors at the same time.
yields:
Placeholders
Any selector that includes a %
is considered a placeholder.
Placeholders will not be output in the final CSS.
%
yields:
Partial selectors
If you inherit a selector, all rules that include that selector will be included as well.
yields:
Chained inheritance
yields:
Media Queries
Inheriting from inside a media query will create a copy of the declarations.
It will act like a "mixin".
Thus, with %
placeholders, you won't have to use mixins at all.
Each type of media query will need its own declaration,
so there will be some inevitable repetition.
{} {}
yields:
{}
Limitations
- When in a media query, you can only inherit rules from root, or rules contained in a media query with the same parameters.