# 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.

```scss
--#{$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.

{% code title="src/\_variables.scss" %}

```scss
$var-prefix: 's';
```

{% endcode %}

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

```scss
// 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 *;
```