# 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 *;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://spectrecss.angular-package.dev/variables/css-variable-name.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.