JavaFX CSS样式表变量使用报错：如何正确定义与引用？

你的问题出在JavaFX CSS不支持标准CSS3变量语法，你用的var(--xxx)和:root下的--xxx变量定义，都是标准CSS的写法，但JavaFX的CSS解析器不认这套，这就是报错的根本原因。

正确的JavaFX自定义属性用法 #

JavaFX有自己的自定义属性机制，和标准CSS变量不同，具体规则如下：

• 定义属性：必须用-fx-作为前缀，通常在.root选择器里定义（因为.root是所有节点的根，属性会自动继承给子节点），不需要:root选择器。
• 引用属性：直接写属性名，不需要var()函数包裹。

修改后的代码示例 #

1. 修正utility.css

把原来的标准变量改成JavaFX自定义属性：

.root {
    -fx-maincolor: #2b284d;
    -fx-backgrounddark: #2b284d;
    -fx-backgroundlight: #5a4f7d;
    -fx-panel: #3c325c;
    -fx-panelhighlighted: #503d6b;
    -fx-panelselected: #503d6f;
    -fx-casualbutton: #2b284d;
    -fx-casualbuttonhighlighted: #5d5478;
    -fx-crucialbuttonhightled: #eb5b0e;
    -fx-textfield: #2b288d;
    -fx-textfill: #b5b5b5;
}

2. 修正引用样式表（比如login-menu.css）

把所有var(--xxx)替换成对应的-fx-xxx属性：

@import "utility.css";

.combo-box .list-cell:filled:selected {
    -fx-background-color: -fx-panelhighlighted;
    -fx-text-fill: -fx-textfill;
    -fx-font-family: "Calibri Light";
    -fx-font-size: 17;
    -fx-background-radius: 20px;
}

.combo-box .combo-box-popup .list-view, .combo-box .combo-box-popup .list-cell {
    -fx-background-color: -fx-panel;
    -fx-text-fill: -fx-textfill;
    -fx-font-family: "Calibri Light";
    -fx-font-size: 17;
    -fx-background-radius: 20px;
}

/* 其他规则同理修改 */

补充说明 #

• 之前删除变量名里的横杠没用，因为问题不是变量名的格式，而是你用了JavaFX不支持的var()函数和--前缀变量语法。
• IDE能自动补全是因为它把代码当成标准CSS处理，但运行时JavaFX的解析器只认自己的自定义属性规则。
• JavaFX的自定义属性支持继承，所以在.root里定义的属性可以被所有子节点直接引用，完全能满足你主题切换的需求。

内容的提问来源于stack exchange，提问作者human0id