1 | @use '../custom-properties';
|
2 | @use '../theme';
|
3 |
|
4 | .simple {
|
5 | @include theme.property(width, 'calc(x - y)', $replace: (x: 100%, y: 20px));
|
6 | }
|
7 |
|
8 | .var {
|
9 | $first: custom-properties.create(--m-foo, 16px);
|
10 | $second: custom-properties.create(--m-bar, 8px);
|
11 | @include theme.property(
|
12 | width,
|
13 | 'calc(first + second)',
|
14 | $replace: (first: $first, second: $second)
|
15 | );
|
16 |
|
17 | @include theme.property(
|
18 | height,
|
19 | 'calc(first + second + first + second)',
|
20 | $replace: (first: $first, second: $second)
|
21 | );
|
22 | }
|
23 |
|
24 | .multiple {
|
25 | @include theme.property(width, 'calc(x + x + x)', $replace: (x: 8px));
|
26 | }
|
27 |
|
28 | .list {
|
29 | @include theme.property(padding, 0 value, $replace: (value: 16px));
|
30 | }
|
31 |
|
32 | .replace-nulls {
|
33 |
|
34 | @include theme.property(padding, a b, $replace: (a: 16px, b: null));
|
35 | }
|