Feature Targeting
MDC Feature Targeting provides infrastructure to allow CSS styles to be included or excluded categorically.
Most of the time, you shouldn't need to depend on mdc-feature-targeting
directly. However, understanding it can be useful if you're interested in having more control over when certain types of MDC styles are emitted.
Installation
npm install @material/feature-targeting
Basic Usage
Styles
Authoring component styles:
@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";
@mixin my-component-core-styles($query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
@include mdc-feature-targets($feat-structure) {
}
}
Consuming component styles:
@import "@material/feature-targeting/functions";
@import "my-component-mixins";
@include my-component-core-styles;
@include my-component-core-styles(structure);
@include my-component-core-styles(mdc-feature-any(color, typography));
@include my-component-core-styles(mdc-feature-without(animation));
Sass Mixins and Functions
Mixin | Description |
---|
mdc-feature-targets($feature-targets...) | Conditionalizes content to only be emitted if the given feature target(s) is/are queried. |
Function | Description |
---|
mdc-feature-create-target($feature-query, $targeted-feature) | Returns a variable to be passed to mdc-feature-targets in order to filter emitted styles. |
mdc-feature-all($feature-queries...) | Returns a query object which will result in emitting mdc-feature-targets blocks that match all of the specified features. Passing no arguments results in all blocks being emitted, which is the most common use case. |
mdc-feature-any($feature-queries...) | Returns a query object which will result in emitting mdc-feature-targets blocks that match any of the specified features. Passing no arguments results in no blocks being emitted. |
mdc-feature-without($feature-query) | Returns a query object which will result in emitting mdc-feature-targets blocks that do not match the specified feature. |
$feature-query
and $feature-queries
refer to one or more of the values listed below under Supported Features.
Supported Features
MDC Web's styles are currently split according to the following features:
structure
- All baseline styles that don't fit into any other categoryanimation
- Styles responsible for causing animations and transitions to occurcolor
- Color-specific styles which rely on mdc-theme
variablestypography
- Typography-specific styles which rely on mdc-typography