将 scss 变量应用于类样式属性

Question

是否可以以某种方式在 ExtJS v7 类内联中使用 scss 变量？

例如，我在

packages/local/myTheme/sass/var/Component.scss

中有全局主题变量：

$comp-divider-color: #B5BFCA;

还有一些课程：

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

Answer 1

据我所知，SCSS 变量在构建过程中用于创建 CSS 文件，所以我认为您不能在 Ext JS 代码中直接引用它们。但还有其他选择。

选项1

创建自定义 CSS 样式，使用 SCSS 变量并将该样式添加到 Ext JS 中的组件中。为此，请将以下内容添加到设置变量的 SCSS 文件中：

$my-font-size: 36px;

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

在此之后，您可以使用

cls

或

userCls

等将此 CSS 样式分配给基本上任何 Ext JS 组件，例如：

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

选项2

您还可以将 CSS 变量添加到 SCSS 文件中，例如添加到

Application.scss

，如下所示：

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

并在组件的

style

配置中使用它：

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

选项3

您可以在 Ext JS 应用程序中创建一个单例类来保留一些全局变量并在代码中的任何位置使用它们：

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

并在 ExtJS 代码中使用它，例如：

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