CSS variables that are output as native CSS custom properties.
When a CSS value starts with @, it becomes var(--name) (or var(--mN) for numeric keys).
Pre-initialized with keys '1'-'12' mapping to an exponential rem scale (e.g., @1=0.25rem, @3=1rem).
Changes to cssVars are automatically reflected in a <style> tag in <head>, making updates
reactive across all elements using those variables.
Example
cssVars.primary = '#3b82f6'; cssVars[3] = '16px'; // Override @3 to be 16px instead of 1rem $('p color:@primary'); // Sets color to var(--primary) $('div mt:@3'); // Sets margin-top to var(--m3)
CSS variables that are output as native CSS custom properties.
When a CSS value starts with
@, it becomesvar(--name)(orvar(--mN)for numeric keys). Pre-initialized with keys '1'-'12' mapping to an exponential rem scale (e.g., @1=0.25rem, @3=1rem).Changes to cssVars are automatically reflected in a
<style>tag in<head>, making updates reactive across all elements using those variables.