@use
Insert rules stored in CSS custom properties, the same as the use attribute but written in the code.
Syntax
- @use: var(--rule)
- @use: var(--rule), var(--other)
- @use: var(--rule, var(--fallback))
The custom properties are read from the element, so they can be declared on css-doodle,
on :root, or anywhere they inherit from.
Wrap stored rules in parentheses so they are a valid custom property value.
Inserted rules may contain @use themselves; a property that includes itself is skipped.
Examples
<style>
:root {
--rule-aa: (
@grid: 5 / 60vmin;
clip-path: circle(100% at 0 0);
);
--rule-bb: (
background-image: radial-gradient(#fff 50%, #0000 0);
background-position: -25% -25%;
background-size: @r(40%, 80%) @lr;
background-repeat: no-repeat;
);
}
</style>
<css-doodle>
@use: var(--rule-aa), var(--rule-bb);
background-color: #000;
</css-doodle>