> For the complete documentation index, see [llms.txt](https://docs.elentra.org/ejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elentra.org/ejs/design-system/style-library/how-it-works/variables.md).

# Variables

## \_variables.scss

The first thing `app.scss` does is prepare the **Style Library** variables by importing `_variables.scss`, so that they are accessible to the subsequently loaded SCSS partials. The `_variables.scss` partial works in much the same way, importing each of the partials located within the `/styles/variables` directory (albeit they are loaded in a specific order, based on their relative dependencies).

{% code title="elentra-2x-js/src/styles/variables" %}

```
variables/
├──	_animation.scss
├──	_border.scss
├──	_breakpoints.scss
├──	_colors.scss
├──	_header.scss
├──	_iconography.scss
├──	_layering.scss
├──	_sidebar.scss
├──	_spacing.scss
└──	_typography.scss
```

{% endcode %}

Each of those `/variables` partials contains a series of CSS custom properties (sometimes referred to as CSS variables) defined on a `:root` rule. Each custom property within that rule is set to its Elentra JS default value. 

In each partial, after all of the custom properties have been defined for `:root`, a section at the bottom of the partial then maps those custom properties to their equivalent, SCSS variables (with identical names). This allows for the use of either CSS custom properties `var(--ejs-spacing--lg)` or its corresponding, SCSS equivalent `$ejs-spacing--lg`. 

The code block below is a trimmed excerpt from `_animations.scss` that showcases the `:root` rule and the re-assignment to SCSS variables that was described previously.

{% code title="elentra-2x-js/src/styles/variables/\_animation.scss" %}

```css
/* ---------- Define CSS Custom Properties ---------- */

:root {

    /* --- Animation: Easing Functions --- */
    --ejs-easing---d: ease-in-out; 

    /* --- Animation: Transition Durations --- */
    --ejs-duration-transition---d:    0.2s;                                             /* 200ms */
    --ejs-duration-transition--quick: calc(var(--ejs-duration-transition---d) / 2);     /* 100ms */
    --ejs-duration-transition--slow:  calc(var(--ejs-duration-transition---d) * 2);     /* 400ms */

    /* --- Animation: Fade Preset (Default) --- */
    --ejs-animate-in---d:       none;       /*   "Fade In" Animation */
    --ejs-animate-out---d:      none;       /*  "Fade Out" Animation */

    /* --- Animation: Slide Preset --- */
    --ejs-animate-in--slide:    none;       /*  "Slide In" Animation */
    --ejs-animate-out--slide:   none;       /* "Slide Out" Animation */

}

/* ---------- Map CSS Custom Properties to SCSS Variables ---------- */

/* --- Animation: Easing Functions --- */
$ejs-easing---d: var(--ejs-easing---d); 

/* --- Animation: Transition Durations --- */
$ejs-duration-transition---d:    var(--ejs-duration-transition---d);        /* 200ms */
$ejs-duration-transition--quick: var(--ejs-duration-transition--quick);     /* 100ms */
$ejs-duration-transition--slow:  var(--ejs-duration-transition--slow);      /* 400ms */

/* --- Animation: Fade Preset (Default) --- */
$ejs-animate-in---d:        var(--ejs-animate-in---d);          /*   "Fade In" Animation */
$ejs-animate-out---d:       var(--ejs-animate-out---d);         /*  "Fade Out" Animation */

/* --- Animation: Slide Preset --- */
$ejs-animate-in--slide:     var(--ejs-animate-in--slide);       /*  "Slide In" Animation */
$ejs-animate-out--slide:    var(--ejs-animate-out--slide);      /* "Slide Out" Animation */
```

{% endcode %}

Having an isolated `_variables.scss` file that includes all variable sub-partials means that when working in a Vue.js component, a developer can easily gain access to only the variables (without needing to load all of `app.scss`), simply by writing: `@import '@/styles/_variables.scss';`