0
# Sass Mixins
1

2
Programmatic mixins for creating custom grid implementations and responsive layouts.
3

4
## Core Layout Mixins
5

6
### layout-grid
7

8
Generates CSS for a grid container on a specific device type.
9

10
```scss { .api }
11
@mixin layout-grid($size, $margin, $max-width: null);
12
```
13

14
**Parameters:**
15
- `$size`: Device type (`desktop`, `tablet`, or `phone`)
16
- `$margin`: Margin size around the grid
17
- `$max-width`: Optional maximum width constraint
18

19
**Usage:**
20
```scss
21
@use "@material/layout-grid" as grid;
22

23
.custom-grid {
24
  @include grid.layout-grid(desktop, 32px, 1200px);
25
}
26
```
27

28
**Generated CSS:**
29
- Sets box-sizing to border-box
30
- Centers the grid with auto margins
31
- Applies specified margins with CSS custom property fallback
32
- Sets maximum width if provided
33

34
### inner
35

36
Generates CSS for the grid inner wrapper on a specific device type.
37

38
```scss { .api }
39
@mixin inner($size, $margin, $gutter);
40
```
41

42
**Parameters:**
43
- `$size`: Device type (`desktop`, `tablet`, or `phone`)
44
- `$margin`: Grid margin (used for CSS custom property naming)
45
- `$gutter`: Space between grid cells
46

47
**Usage:**
48
```scss
49
@use "@material/layout-grid" as grid;
50

51
.custom-grid__inner {
52
  @include grid.inner(desktop, 24px, 16px);
53
}
54
```
55

56
**Generated CSS:**
57
- Sets up flexbox layout with wrapping
58
- Manages gutters with negative margins
59
- Provides CSS Grid fallback with grid-template-columns
60
- Uses CSS custom properties for runtime customization
61

62
### cell
63

64
Generates CSS for a grid cell on a specific device type.
65

66
```scss { .api }
67
@mixin cell($size, $default-span, $gutter);
68
```
69

70
**Parameters:**
71
- `$size`: Device type (`desktop`, `tablet`, or `phone`)
72
- `$default-span`: Default column span (1-12)
73
- `$gutter`: Gutter size matching the parent inner
74

75
**Usage:**
76
```scss
77
@use "@material/layout-grid" as grid;
78

79
.custom-cell {
80
  @include grid.cell(desktop, 6, 24px);
81
}
82
```
83

84
**Generated CSS:**
85
- Sets width based on column span calculation
86
- Applies gutter margins
87
- Provides CSS Grid fallback behavior
88
- Uses CSS custom properties for runtime theming
89

90
## Specialized Mixins
91

92
### fixed-column-width
93

94
Generates CSS for fixed-width column containers.
95

96
```scss { .api }
97
@mixin fixed-column-width($size, $margin, $gutter, $column-width);
98
```
99

100
**Parameters:**
101
- `$size`: Device type (`desktop`, `tablet`, or `phone`)
102
- `$margin`: Grid margin size
103
- `$gutter`: Gutter size between columns
104
- `$column-width`: Fixed width for each column
105

106
**Usage:**
107
```scss
108
@use "@material/layout-grid" as grid;
109

110
.fixed-grid {
111
  @include grid.fixed-column-width(desktop, 24px, 16px, 80px);
112
}
113
```
114

115
**Generated CSS:**
116
- Calculates total width: (columns × column-width) + (gutters × gutter-size) + (margins × 2)
117
- Uses CSS custom properties for runtime customization
118

119
### cell-order
120

121
Sets the visual order of a grid cell.
122

123
```scss { .api }
124
@mixin cell-order($order);
125
```
126

127
**Parameters:**
128
- `$order`: Order value (1-12)
129

130
**Usage:**
131
```scss
132
@use "@material/layout-grid" as grid;
133

134
.priority-cell {
135
  @include grid.cell-order(1);
136
}
137
```
138

139
### cell-align
140

141
Sets the vertical alignment of a grid cell.
142

143
```scss { .api }
144
@mixin cell-align($position);
145
```
146

147
**Parameters:**
148
- `$position`: Alignment position (`top`, `middle`, `bottom`, or `stretch`)
149

150
**Usage:**
151
```scss
152
@use "@material/layout-grid" as grid;
153

154
.centered-cell {
155
  @include grid.cell-align(middle);
156
}
157
```
158

159
## Helper Functions
160

161
### breakpoint-min
162

163
Returns the minimum width for a breakpoint or null for the smallest breakpoint.
164

165
```scss { .api }
166
@function breakpoint-min($size);
167
```
168

169
**Parameters:**
170
- `$size`: Device type (`desktop`, `tablet`, or `phone`)
171

172
**Returns:** Pixel value or null
173

174
**Usage:**
175
```scss
176
@use "@material/layout-grid" as grid;
177

178
$desktop-min: grid.breakpoint-min(desktop); // Returns 840px
179
$phone-min: grid.breakpoint-min(phone);     // Returns null
180
```
181

182
### breakpoint-max
183

184
Returns the maximum width for a breakpoint or null for the largest breakpoint.
185

186
```scss { .api }
187
@function breakpoint-max($size);
188
```
189

190
**Parameters:**
191
- `$size`: Device type (`desktop`, `tablet`, or `phone`)
192

193
**Returns:** Pixel value or null
194

195
**Usage:**
196
```scss
197
@use "@material/layout-grid" as grid;
198

199
$tablet-max: grid.breakpoint-max(tablet);   // Returns 839px
200
$desktop-max: grid.breakpoint-max(desktop); // Returns null
201
```
202

203
## Complete Custom Grid Example
204

205
```scss
206
@use "@material/layout-grid" as grid;
207

208
// Custom responsive grid
209
.article-grid {
210
  // Desktop layout
211
  @media (min-width: 840px) {
212
    @include grid.layout-grid(desktop, 32px, 1200px);
213
  }
214
  
215
  // Tablet layout
216
  @media (min-width: 600px) and (max-width: 839px) {
217
    @include grid.layout-grid(tablet, 24px);
218
  }
219
  
220
  // Phone layout
221
  @media (max-width: 599px) {
222
    @include grid.layout-grid(phone, 16px);
223
  }
224
}
225

226
.article-grid__inner {
227
  @media (min-width: 840px) {
228
    @include grid.inner(desktop, 32px, 20px);
229
  }
230
  
231
  @media (min-width: 600px) and (max-width: 839px) {
232
    @include grid.inner(tablet, 24px, 16px);
233
  }
234
  
235
  @media (max-width: 599px) {
236
    @include grid.inner(phone, 16px, 12px);
237
  }
238
}
239

240
.article-grid__main {
241
  @media (min-width: 840px) {
242
    @include grid.cell(desktop, 8, 20px);
243
  }
244
  
245
  @media (min-width: 600px) and (max-width: 839px) {
246
    @include grid.cell(tablet, 6, 16px);
247
  }
248
  
249
  @media (max-width: 599px) {
250
    @include grid.cell(phone, 4, 12px);
251
  }
252
}
253

254
.article-grid__sidebar {
255
  @include grid.cell-align(top);
256
  
257
  @media (min-width: 840px) {
258
    @include grid.cell(desktop, 4, 20px);
259
    @include grid.cell-order(2);
260
  }
261
  
262
  @media (min-width: 600px) and (max-width: 839px) {
263
    @include grid.cell(tablet, 2, 16px);
264
  }
265
  
266
  @media (max-width: 599px) {
267
    @include grid.cell(phone, 4, 12px);
268
    @include grid.cell-order(1); // Show first on mobile
269
  }
270
}
271
```
272

273
## Device Size Reference
274

275
When using mixins, these are the available device sizes:
276

277
- **desktop**: 840px+, 12 columns available
278
- **tablet**: 600px-839px, 8 columns available
279
- **phone**: 0px-599px, 4 columns available