0
# Sass Mixins
1

2
Programmatic application of typography styles with advanced features like feature targeting, style exclusion, and baseline alignment utilities. These mixins provide flexible integration with Sass-based projects and other Material Components.
3

4
## Capabilities
5

6
### Core Styles Mixin
7

8
Generates all typography CSS classes programmatically. Equivalent to including `styles.scss`.
9

10
```scss { .api }
11
/**
12
 * Outputs all typography CSS classes (.mdc-typography, .mdc-typography--*)
13
 * @param $query - Feature targeting query for conditional compilation
14
 */
15
@mixin core-styles($query: feature-targeting.all());
16
```
17

18
**Usage Example:**
19

20
```scss
21
@use "@material/typography";
22

23
// Generate all typography classes
24
@include typography.core-styles;
25

26
// Or with feature targeting (advanced)
27
@include typography.core-styles($query: feature-targeting.create-target($query, typography));
28
```
29

30
### Base Typography Mixin
31

32
Applies the foundational typography styles including Roboto font family and font smoothing.
33

34
```scss { .api }
35
/**
36
 * Applies base typography styles (font-family, font smoothing)
37
 * @param $query - Feature targeting query for conditional compilation
38
 */
39
@mixin base($query: feature-targeting.all());
40
```
41

42
**Usage Examples:**
43

44
```scss
45
@use "@material/typography";
46

47
.my-component {
48
  @include typography.base;
49
}
50

51
// Outputs:
52
// .my-component {
53
//   font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
54
//   -moz-osx-font-smoothing: grayscale;
55
//   -webkit-font-smoothing: antialiased;
56
// }
57
```
58

59
### Typography Style Mixin
60

61
Applies a specific typography style to an element with full customization options.
62

63
```scss { .api }
64
/**
65
 * Applies a specific typography style with optional property exclusion
66
 * @param $style - Typography style name (headline1, body1, etc.)
67
 * @param $query - Feature targeting query for conditional compilation
68
 * @param $exclude-props - List of properties to exclude from the style
69
 */
70
@mixin typography(
71
  $style,
72
  $query: feature-targeting.all(),
73
  $exclude-props: ()
74
);
75
```
76

77
**Usage Examples:**
78

79
```scss
80
@use "@material/typography";
81

82
// Apply complete headline1 style
83
.page-title {
84
  @include typography.typography(headline1);
85
}
86

87
// Apply body1 but exclude line-height
88
.custom-text {
89
  @include typography.typography(body1, $exclude-props: (line-height));
90
  line-height: 1.8; // Custom line height
91
}
92

93
// Multiple styles for different breakpoints
94
.responsive-heading {
95
  @include typography.typography(headline6);
96
  
97
  @media (min-width: 768px) {
98
    @include typography.typography(headline4);
99
  }
100
  
101
  @media (min-width: 1024px) {
102
    @include typography.typography(headline2);
103
  }
104
}
105
```
106

107
### Font Smoothing Mixin
108

109
Applies font antialiasing and smoothing for better text rendering.
110

111
```scss { .api }
112
/**
113
 * Applies font antialiasing via font-smoothing to text
114
 * @param $query - Feature targeting query for conditional compilation
115
 */
116
@mixin smooth-font($query: feature-targeting.all());
117
```
118

119
**Usage Example:**
120

121
```scss
122
@use "@material/typography";
123

124
.custom-text {
125
  font-family: "Custom Font", sans-serif;
126
  @include typography.smooth-font;
127
}
128

129
// Outputs:
130
// .custom-text {
131
//   font-family: "Custom Font", sans-serif;
132
//   -moz-osx-font-smoothing: grayscale;
133
//   -webkit-font-smoothing: antialiased;
134
// }
135
```
136

137
### Text Overflow Mixin
138

139
Truncates overflow text with ellipsis. Element must be `display: block` or `display: inline-block`.
140

141
```scss { .api }
142
/**
143
 * Truncates overflow text to one line with an ellipsis
144
 * @param $query - Feature targeting query for conditional compilation
145
 * @note Element must be display: block or display: inline-block
146
 */
147
@mixin overflow-ellipsis($query: feature-targeting.all());
148
```
149

150
**Usage Examples:**
151

152
```scss
153
@use "@material/typography";
154

155
.truncated-title {
156
  @include typography.typography(headline6);
157
  @include typography.overflow-ellipsis;
158
  width: 200px; // Fixed width required
159
}
160

161
.card-title {
162
  display: block;
163
  @include typography.overflow-ellipsis;
164
  max-width: 300px;
165
}
166

167
// Outputs:
168
// .card-title {
169
//   display: block;
170
//   text-overflow: ellipsis;
171
//   white-space: nowrap;
172
//   overflow: hidden;
173
//   max-width: 300px;
174
// }
175
```
176

177
### Baseline Alignment Mixin
178

179
Sets a container's baseline that text content will align to, with support for different display types.
180

181
```scss { .api }
182
/**
183
 * Sets a container's baseline that text content will align to
184
 * @param $top - Distance from top of container to text baseline
185
 * @param $bottom - Distance from text baseline to bottom of container
186
 * @param $display - Display type: flex, inline-flex, block, or inline-block
187
 * @param $query - Feature targeting query for conditional compilation
188
 * @note For flexbox displays, only $top baseline may be set
189
 */
190
@mixin baseline(
191
  $top: 0,
192
  $bottom: 0,
193
  $display: block,
194
  $query: feature-targeting.all()
195
);
196
```
197

198
**Usage Examples:**
199

200
```scss
201
@use "@material/typography";
202

203
// Block element with top and bottom baseline
204
.text-container {
205
  @include typography.baseline($top: 28px, $bottom: 16px, $display: block);
206
}
207

208
// Flexbox container with top baseline only  
209
.flex-container {
210
  @include typography.baseline($top: 32px, $display: flex);
211
}
212

213
// Inline-block with custom spacing
214
.inline-text {
215
  @include typography.baseline($top: 20px, $bottom: 8px, $display: inline-block);
216
}
217
```
218

219
### Text Baseline Mixin
220

221
Sets the baseline of flow text content with line-height support. Intended for text flow content only.
222

223
```scss { .api }
224
/**
225
 * Sets the baseline of flow text content
226
 * @param $top - Distance from top of container to text baseline
227
 * @param $bottom - Distance from text baseline to bottom of container  
228
 * @param $display - Display type: block or inline-block
229
 * @param $lineHeight - Line height for the text (distance between baselines)
230
 * @param $query - Feature targeting query for conditional compilation
231
 * @note Intended for text flow content only (h1, p, span, div with text)
232
 */
233
@mixin text-baseline(
234
  $top: 0,
235
  $bottom: 0,
236
  $display: block,
237
  $lineHeight: normal,
238
  $query: feature-targeting.all()
239
);
240
```
241

242
**Usage Example:**
243

244
```scss
245
@use "@material/typography";
246

247
.article-text {
248
  @include typography.typography(body1);
249
  @include typography.text-baseline(
250
    $top: 20px,
251
    $bottom: 16px,
252
    $lineHeight: 1.6
253
  );
254
}
255
```
256

257
### Advanced Baseline Mixins
258

259
Individual baseline utilities for fine-grained control.
260

261
```scss { .api }
262
/**
263
 * Creates a baseline strut from the top of a container
264
 * @param $distance - Distance from top of container to text baseline
265
 * @param $query - Feature targeting query for conditional compilation
266
 */
267
@mixin baseline-top($distance, $query: feature-targeting.all());
268

269
/**
270
 * Creates a baseline strut from baseline to bottom of container
271
 * @param $distance - Distance from text baseline to bottom of container
272
 * @param $query - Feature targeting query for conditional compilation
273
 */
274
@mixin baseline-bottom($distance, $query: feature-targeting.all());
275

276
/**
277
 * Adds invisible, zero-width prefix to ensure consistent baseline
278
 * @param $query - Feature targeting query for conditional compilation
279
 * @note Do not use with baseline mixin (they conflict)
280
 */
281
@mixin zero-width-prefix($query: feature-targeting.all());
282
```
283

284
**Usage Examples:**
285

286
```scss
287
@use "@material/typography";
288

289
// Manual baseline control
290
.custom-baseline {
291
  @include typography.baseline-top(24px);
292
  @include typography.baseline-bottom(12px);
293
}
294

295
// Ensure baseline consistency when text might be empty
296
.dynamic-content {
297
  @include typography.zero-width-prefix;
298
}
299
```
300

301
### Theme Styles Mixin
302

303
Applies theme-based typography properties using a theme map.
304

305
```scss { .api }
306
/**
307
 * Applies theme-based typography properties
308
 * @param $theme - Theme map with typography properties
309
 */
310
@mixin theme-styles($theme);
311

312
// Theme map structure:
313
$typography-theme: (
314
  font: null,
315
  line-height: null,
316
  size: null,
317
  weight: null,
318
  tracking: null,
319
);
320
```
321

322
**Usage Example:**
323

324
```scss
325
@use "@material/typography";
326

327
$custom-theme: (
328
  font: "Arial, sans-serif",
329
  size: 18px,
330
  weight: 600,
331
  line-height: 1.4,
332
  tracking: 0.5px
333
);
334

335
.themed-text {
336
  @include typography.theme-styles($custom-theme);
337
}
338
```
339

340
## Mixin Combination Patterns
341

342
### Complete Typography Setup
343

344
```scss
345
@use "@material/typography";
346

347
.article {
348
  @include typography.base;
349
  
350
  h1 {
351
    @include typography.typography(headline2);
352
    @include typography.overflow-ellipsis;
353
    max-width: 100%;
354
  }
355
  
356
  p {
357
    @include typography.typography(body1);
358
    @include typography.text-baseline($top: 16px, $bottom: 16px);
359
  }
360
  
361
  .caption {
362
    @include typography.typography(caption);
363
  }
364
}
365
```
366

367
### Responsive Typography Mixins
368

369
```scss
370
@use "@material/typography";
371

372
.responsive-heading {
373
  // Mobile first
374
  @include typography.typography(headline6);
375
  
376
  @media (min-width: 600px) {
377
    @include typography.typography(headline4);
378
  }
379
  
380
  @media (min-width: 960px) {
381
    @include typography.typography(headline2);
382
  }
383
}
384
```
385

386
### Custom Component Integration
387

388
```scss
389
@use "@material/typography";
390

391
.custom-card {
392
  @include typography.base;
393
  
394
  &__title {
395
    @include typography.typography(headline6);
396
    @include typography.overflow-ellipsis;
397
  }
398
  
399
  &__subtitle {
400
    @include typography.typography(subtitle2);
401
    margin-bottom: 16px;
402
  }
403
  
404
  &__content {
405
    @include typography.typography(body2);
406
    @include typography.text-baseline($top: 20px, $bottom: 20px);
407
  }
408
  
409
  &__action {
410
    @include typography.typography(button);
411
  }
412
}