36 lines
830 B
SCSS
36 lines
830 B
SCSS
|
@use '../custom-properties';
|
||
|
|
@use '../theme';
|
||
|
|
|
||
|
|
.simple {
|
||
|
|
@include theme.property(width, 'calc(x - y)', $replace: (x: 100%, y: 20px));
|
||
|
|
}
|
||
|
|
|
||
|
|
.var {
|
||
|
|
$first: custom-properties.create(--m-foo, 16px);
|
||
|
|
$second: custom-properties.create(--m-bar, 8px);
|
||
|
|
@include theme.property(
|
||
|
|
width,
|
||
|
|
'calc(first + second)',
|
||
|
|
$replace: (first: $first, second: $second)
|
||
|
|
);
|
||
|
|
|
||
|
|
@include theme.property(
|
||
|
|
height,
|
||
|
|
'calc(first + second + first + second)',
|
||
|
|
$replace: (first: $first, second: $second)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
.multiple {
|
||
|
|
@include theme.property(width, 'calc(x + x + x)', $replace: (x: 8px));
|
||
|
|
}
|
||
|
|
|
||
|
|
.list {
|
||
|
|
@include theme.property(padding, 0 value, $replace: (value: 16px));
|
||
|
|
}
|
||
|
|
|
||
|
|
.replace-nulls {
|
||
|
|
// Entire block should be dropped. This should not be emitted.
|
||
|
|
@include theme.property(padding, a b, $replace: (a: 16px, b: null));
|
||
|
|
}
|