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

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

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.

elentra-2x-js/src/styles/variables/_animation.scss

/* ---------- 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 */

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';