@var
Emit a var() that survives being stored in a custom property.
Syntax
- @var(--<name>)
When doodle code is kept in a custom property for use,
the browser substitutes any var() inside it before css-doodle reads the code.
@var(--x) is written out as var(--x) only when the code is generated,
so the reference stays intact.
Examples
<style>
css-doodle {
--rule: (
@grid: 5 / 60vmin _1px;
--lg: linear-gradient(
@p(±45deg, ±135deg), #000 50%, #0000 0
);
/* var(--lg) here would be resolved too early */
background:
@var(--lg) 0 0 / 100% 100%,
@var(--lg) 0 0 / 50% 50%;
);
}
</style>
<css-doodle use="var(--rule)"></css-doodle>
In code written directly in the element a plain var() works, since the browser never sees the code as a property value:
@grid: 5 / 60vmin _1px;
--bg: #000;
background: linear-gradient(
@r(360deg),
var(--bg) 50%, #0000 0
);