Mixins

_mixins.scss

This SCSS partial simply defines various functions and mixins in SCSS that are used in various places throughout Elentra JS.

The most important function to be aware of is our color function, ejsc(), which accepts two parameters, with the second being an optional transparency/alpha decimal value. When working in any component that needs to make use of the Elentra JS Design System color variables, make sure that the following import statements are present at the top of your <style lang="scss"> tag set:

Proper Import Declarations

<style lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';
...
</style>

Once those two files are imported into your component, you will have access to the color variables themselves, as well as the ability to pass them to the ejsc() function as below:

div.example {
    background-color: ejsc($ejs-color-brand--primary);    /*       Solid */
    color: ejsc($ejs-color-brand--secondary, .5);         /* 50% Opacity */
}