Apply scss variable to class style property

Is it possible somehow to use scss variables in ExtJS v7 class inline?

For example, I have global theme variable in packages/local/myTheme/sass/var/Component.scss:

$comp-divider-color: #B5BFCA;

And some class:

Ext.define('Separator', {
    extend: 'Ext.Component',
    alias: 'widget.Separator',
    xtype: 'Separator',
    style: {
        color: '$comp-divider-color', <--- some var name from scss
    },
    html: '|',
});

As far as I know the SCSS variables are used during the build process to create the CSS files, so I think you can't reference them directly in your Ext JS code. But there are other options.

Option 1

Create a custom CSS style, use the SCSS variable there and add this style to the component in Ext JS. To do so, add the following to the SCSS file where your variable is set:

$my-font-size: 36px;

.my-big-text {
  font-size: $my-font-size;
}

After this, you can assign this CSS style to basically any Ext JS component using cls or userCls etc., for example:

{
    xtype: 'component',
    cls: 'my-big-text',
    html: 'This is big'
}

Option 2

You can also add a CSS variable to the SCSS file, for example to Application.scss like this:

:root {
  --my-small-text: 10px;
}

And use this in the style config of a component:

{
    xtype: 'component',
    style: 'font-size: var(--my-small-text);',
    html: 'This is small'
}

Option 3

You can create a singleton class in your Ext JS application to keep some global variables and use them anywhere in your code:

Ext.define('MyApp.config.Global', {
    singleton: true,
    alternateClassName: 'MyApp.Global',
    myRedColor: '#FF0000',
});

And use this in the ExtJS code like:

{
    xtype: 'component',
    style: {
        color: MyApp.Global.myRedColor,
    },
    html: 'This is red',
}