CSS variable name

Spectre CSS variables are defined in the same pattern as SCSS variables to have naming consistency, but with additional customizable prefix.

Structure

In general CSS variable name structure is defined as follows.

--#{$var-prefix}-#{$name}: #{$value}

It's possible to customize the CSS variables' names with the SCSS variable $var-prefix, which by default is set to s.

$var-prefix

The SCSS $var-prefix variable is responsible for the prefix of Spectre CSS variables.

src/_variables.scss

$var-prefix: 's';

For example, default CSS variable --s-control-padding-x can be changed to --spectre-control-padding-x after change the $var-prefix to 'spectre';

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Change the $var-prefix
$var-prefix: 'spectre';

// Define CSS variables.
@use 'node_modules/@angular-package/spectre.css/css-variables' as *;