> For the complete documentation index, see [llms.txt](https://spectrecss.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://spectrecss.angular-package.dev/variables/using-css-variables.md).

# Using CSS variables

To inject prefixed CSS variables with the help comes [`get-var()`](/function/var/get-var.md) 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`](/variables/css-variable-name.md#usdvar-prefix), `$suffix` default value is an empty `string`, and `$unit` default value is set to `0`. 

The function returns [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) CSS function with the CSS variable of the `$name` parameter with defaults or returns [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

```css
// 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`**.

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