use
Load rules stored in CSS custom properties, or pass the whole doodle code as an attribute value. The used rules are inserted before the code written inside the element.
Syntax
- <css-doodle use="var(--rule)"></css-doodle>
- <css-doodle use="var(--a), var(--b)"></css-doodle>
- <css-doodle use="var(--a, var(--fallback))"></css-doodle>
- <css-doodle use="@grid: 5 / 60vmin; background: #000;"></css-doodle>
A value that starts with var( is a comma-separated list of custom properties,
each with an optional fallback. Any other value is read as doodle code.
Wrap stored rules in parentheses so they are a valid custom property value.
Examples
<style>
css-doodle {
--rule: (
@grid: 5x5 / 60vmin;
--lg: linear-gradient(
@p(±45deg, ±135deg), #000 50%, #0000 0
);
background:
@p(--lg) 0 0 / 100% 100%,
@p(--lg) 0 0 / 50% 50%;
);
}
</style>
<css-doodle use="var(--rule)"></css-doodle>Split the code into several properties and combine them. Extra rules inside the element are merged in after the used ones:
<style>
css-doodle {
--rule-grid: (
@grid: 8x8 / 60vmin;
);
--rule-pattern: (
--lg: linear-gradient(
@p(±45deg, ±135deg), #000 50%, #0000 0
);
background:
@p(--lg) 0 0 / 100% 100%,
@p(--lg) 0 0 / 50% 50%;
);
}
</style>
<css-doodle use="var(--rule-grid), var(--rule-pattern)">
:doodle {
outline: 4px solid #e6437d;
}
</css-doodle>Code as an attribute
When the value does not start with var( it is used as the code itself.
This helps in frameworks whose template compilers choke on the code written as element content.
<css-doodle use="
@grid: 5x5 / 60vmin;
--lg: linear-gradient(
@p(±45deg, ±135deg), #000 50%, #0000 0
);
background:
@p(--lg) 0 0 / 100% 100%,
@p(--lg) 0 0 / 50% 50%;
"></css-doodle>The @use property
The same list of custom properties can be written in the code with the @use property.