Using CSS variables

To inject prefixed CSS variables with the help comes get-var() function, which takes four parameters: $name $prefix $suffix and $unit.

There is only $name parameter required, and the $prefix default value is equal to $var-prefix, $suffix default value is an empty string, and $unit default value is set to 0.

The function returns var() CSS function with the CSS variable of the $name parameter with defaults or returns calc() CSS function that multiplies by one unit CSS variable value of the same name.

For example, there is SCSS variable $layout-spacing equal to 0.4rem with equivalent prefixed CSS variable --s-layout-spacing equal to 0.4 without rem unit to have the ability to multiply it by the px unit value and It's defined as follows.

// layout-spacing
--s-layout-spacing: 0.4;
--s-layout-spacing-lg: 0.8;
--s-layout-spacing-sm: 0.2;
--s-layout-spacing-unit: 1rem;

To inject into any style the layout-spacing CSS variable value there is a need to provide $unit parameter to 1.

// Get function.
@use 'node_modules/@angular-package/spectre.css/src/functions/get-var' as *;

// Inject `get-var()` simply by given `$name` parameter and `$unit`.
.layout-spacing {
    margin: get-var($name: 'layout-spacing', $unit: 1);
}

// Inject `get-var()` with the smaller spacing without `$name` parameter but
// with -sm added.
.layout-spacing-sm {
    margin: get-var('layout-spacing-sm', $unit: 1);
}

// Inject `get-var()` with the larger spacing by using `$suffix` parameter equal
// to `lg`.
.layout-spacing-lg {
    margin: get-var('layout-spacing', $unit: 1, $suffix: `lg`);
}