UNPKG

2.94 kBMarkdownView Raw
1<!--docs:
2title: "Feature Targeting"
3layout: detail
4section: components
5excerpt: "Provides infrastructure to allow CSS styles to be included or excluded categorically."
6path: /catalog/feature-targeting/
7-->
8
9# Feature Targeting
10
11MDC Feature Targeting provides infrastructure to allow CSS styles to be included or excluded categorically.
12
13Most 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.
14
15## Installation
16
17```
18npm install @material/feature-targeting
19```
20
21## Basic Usage
22
23### Styles
24
25Authoring component styles:
26
27```scss
28@use "@material/feature-targeting";
29
30@mixin my-component-core-styles($query: feature-targeting.all()) {
31 $feat-structure: feature-targeting.create-target($query, structure);
32
33 @include feature-targeting.targets($feat-structure) {
34 // ...
35 }
36}
37```
38
39Consuming component styles:
40
41```scss
42@use "@material/feature-targeting";
43@use "my-component-mixins";
44
45// To include all styles (using the default of mdc-feature-all() defined above):
46@include my-component-core-styles;
47
48// Or, to include a specific subset of styles:
49@include my-component-core-styles(structure);
50@include my-component-core-styles(feature-targeting.any(color, typography));
51// The above two @includes and the following @include would produce equivalent results:
52@include my-component-core-styles(feature-targeting.without(animation));
53```
54
55## Sass Mixins and Functions
56
57Mixin | Description
58--- | ---
59`targets($feature-targets...)` | Conditionalizes content to only be emitted if the given feature target(s) is/are queried.
60
61Function | Description
62--- | ---
63`create-target($feature-query, $targeted-feature)` | Returns a variable to be passed to `targets` in order to filter emitted styles.
64`all($feature-queries...)` | Returns a query object which will result in emitting `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.
65`any($feature-queries...)` | Returns a query object which will result in emitting `targets` blocks that match _any_ of the specified features. Passing no arguments results in no blocks being emitted.
66`without($feature-query)` | Returns a query object which will result in emitting `targets` blocks that do _not_ match the specified feature.
67
68`$feature-query` and `$feature-queries` refer to one or more of the values listed below under Supported Features.
69
70### Supported Features
71
72MDC Web's styles are currently split according to the following features:
73
74* `structure` - All baseline styles that don't fit into any other category
75* `animation` - Styles responsible for causing animations and transitions to occur
76* `color` - Color-specific styles which rely on `mdc-theme` variables
77* `typography` - Typography-specific styles which rely on `mdc-typography`