fbpx

Tutorial

Mapping Elementor Globals CSS Vars to readable Vars, using SCSS

Uses Plugins

Elementor Free

Description

This video shows a way to map Elementor Globals Variables to readable variables for use in Custom CSS.

When you create Global fonts and colors in Elementor, it creates CSS variables with random strings for the names, making it difficult to use them in Custom CSS.

By mapping them to human readable variables, they are easier to use. The benefits are:

1. You can still change the colors and font settings in the Elementor UI

2. The related variable names in your custom CSS are readable and make sense.

Steps

Code (click to copy)

SCSS Uses in demo (scss)

$font-props: 
    'font-family',
    'font-size',
    'font-weight',
    'line-height',
    'text-transform', 
    'font-style',
    'text-decoration',
    'letter-spacing',
    'word-spacing';

$el-font-vars : (
    'primary': 'primary', 
    'secondary': 'secondary', 
    'text': 'text',
    'accent': 'accent',
    'xtra-large-bold': '3c6503f',
    'xtra-large-normal': '36e2b14',
    'xtra-large-thin': '8cd8b0b',
    'medium-bold': '6f3759b',
    'medium-normal': '5cf7a1a',
    'medium-thin': 'c0186d0',
    'small-bold': 'ebaff60',
    'xtra-small-bold': '7aa67dd'
);

$colors: (
    'primary': 'primary',
    'secondary': 'secondary',
    'text': 'text',
    'accent': 'accent',
    'primary-variation': '8bccff3',
    'secondary-variation': '17 f93ed',
    'accent-variation': '77d3a09',
    'white': '6e3ef71',
    'black': '2e02fd0',
    'grey1': '941fe3a',
    'grey2': '571579d', 
    'grey3': '0fc7df9',
    'grey4': '86e0a5b',
    'grey5': '9534843'
);


.elementor-kit-6{
    /*Typography Map */
    @each $name, $var in $el-font-vars{
        @each $prop in $font-props{
            --text-#{$name}-#{$prop}: var(--e-global-typography-#{$var}-#{$prop});
        }
    }
    
    @media (max-width: 1024px){
        /* Elementor puts global font variations in a media query using teh same var names
            Therefore, you will need to manually override any responsive settings here
        */
        --dummy-override: "delete me";
    }
    
    @media (max-width: 767px){
        /* Elementor puts global font variations in a media query using teh same var names
            Therefore, you will need to manually override any responsive settings here
        */
        --dummy-override: "delete me";
    }
    
    /* Color Map */
    @each $name, $var in $colors{
        --color-#{$name}: var(--e-global-color-#{$var});
    } 
}