在 :root 中声明多个自定义 css 属性会导致错误
Declaring multiple custom css properties in :root causes error
我一直在尝试创建多个自定义属性以在我的 CSS 文件中使用，在搜索后我发现它们应该以双破折号为前缀并且通常位于 :root 内，像这样：
:root {
--server-primary: #c38c00;
--server-secondary: #9d7100;
}
但是这样做会立即给我一个错误：javafx.css.CssParser parse WARNING: CSS Error parsing file:/[redacted]/ColorPalette.css: Expected RBRACE at [3,4].
我已经尝试用我能想象到的各种方式解决这个问题，但我找到的唯一解决方案是放弃使用这些双破折号变量来代替以下内容：
.root {
-server-primary: #c38c00;
-server-secondary: #9d7100;
}
我想使用第一个带有双破折号的原因是能够使用 var(--variable-name-here)、which has the added benefit of actually displaying the color in my IDE 来引用它们，而仅调用 -variable-name-here 不会显示哪个使用的颜色：
使用支持的 JavaFX CSS 构造
我认为 JavaFX 不支持 var 表示法中的 : CSS（老实说，我什至不知道它是什么）。
参见 JavaFX CSS 参考资料：
JavaFX 的可能等效项是：
Named Colors <named-color>
CSS supports a bunch of named constant colors. Named colors can be
specified with just their unquoted name for example:
.button {
-fx-background-color: red;
}
Looked-up Colors <looked-up-color>
With looked-up colors you can refer to any other color property that
is set on the current node or any of its parents. This is a very
powerful feature, as it allows a generic palette of colors to be
specified on the scene then used thoughout the application. If you
want to change one of those palette colors you can do so at any level
in the scene tree and it will affect that node and all its decendents.
Looked-up colors are not looked up until they are applied, so they are
live and react to any style changes that might occur, such as
replacing a palette color at runtime with the "style" property on a
node.
In the following example, all background color of all buttons uses the
looked up color "ABC".
.root { abc: #f00 }
.button { -fx-background-color: abc }
Color Functions <color-function>
JavaFX supports some color computation functions. These compute new
colors from input colors at the time the color style is applied. This
enables a color theme to be specified using a single base color and to
have variant colors computed from that base color. There are two color
functions: derive() and ladder().
<derive> | <ladder>
Derive
derive( <color> , <number>% )
The derive function takes a color and computes a brighter or darker
version of that color. The second parameter is the brightness offset,
representing how much brighter or darker the derived color should be.
Positive percentages indicate brighter colors and negative percentages
indicate darker colors. A value of -100% means completely black, 0%
means no change in brightness, and 100% means completely white.
Ladder
ladder(<color> , <color-stop> [, <color-stop>]+)
The ladder function interpolates between colors. The effect is as if a
gradient is created using the stops provided, and then the brightness
of the provided <color> is used to index a color value within that
gradient. At 0% brightness, the color at the 0.0 end of the gradient
is used; at 100% brightness, the color at the 1.0 end of the gradient
is used; and at 50% brightness, the color at 0.5, the midway point of
the gradient, is used. Note that no gradient is actually rendered.
This is merely an interpolation function that results in a single
color.
我建议您改为使用 JavaFX 的这些受支持和记录的功能。
在您的 JavaFX 安装包中的 modena.css 文件中有许多使用它们的示例（在 Idea 中搜索项目库中的文件 modena.css）。
关于 IDE 支持（特别是 IntelliJ Idea）
关于在 IDE 中显示从 CSS 解析的颜色的具体支持，它当然会因 IDE 而异。
对于我认为您正在使用的 IntelliJ Idea，我认为支持会因使用的版本而异。我认为免费社区版可能对 CSS 文件的 CSS 解析和颜色显示支持有限或不支持。付费（称为 Ultimate）版本确实支持 CSS 文件的 CSS 解析和颜色显示。
自 2022.1 终极版起，对于 JavaFX CSS，它将准确显示命名颜色的直接分配以及 RGB 和 HSB-defined 颜色以及一些 JavaFX 颜色派生函数。
它不会显示通过 JavaFX looked-up 颜色或某些 JavaFX 颜色派生函数分配的颜色。只要不查找它们，它就会在渐变中显示停止点，但不会显示渐变本身。 Enhancement requests for the IDE 可以为 IDE 增加对查找和派生颜色的颜色显示支持以及对显示渐变的额外支持。
我一直在尝试创建多个自定义属性以在我的 CSS 文件中使用，在搜索后我发现它们应该以双破折号为前缀并且通常位于 :root 内，像这样：
:root {
--server-primary: #c38c00;
--server-secondary: #9d7100;
}
但是这样做会立即给我一个错误：javafx.css.CssParser parse WARNING: CSS Error parsing file:/[redacted]/ColorPalette.css: Expected RBRACE at [3,4].
我已经尝试用我能想象到的各种方式解决这个问题，但我找到的唯一解决方案是放弃使用这些双破折号变量来代替以下内容：
.root {
-server-primary: #c38c00;
-server-secondary: #9d7100;
}
我想使用第一个带有双破折号的原因是能够使用 var(--variable-name-here)、which has the added benefit of actually displaying the color in my IDE 来引用它们，而仅调用 -variable-name-here 不会显示哪个使用的颜色：
使用支持的 JavaFX CSS 构造
我认为 JavaFX 不支持 var 表示法中的 : CSS（老实说，我什至不知道它是什么）。
参见 JavaFX CSS 参考资料：
JavaFX 的可能等效项是：
Named Colors
<named-color>CSS supports a bunch of named constant colors. Named colors can be specified with just their unquoted name for example:
.button { -fx-background-color: red; }Looked-up Colors
<looked-up-color>With looked-up colors you can refer to any other color property that is set on the current node or any of its parents. This is a very powerful feature, as it allows a generic palette of colors to be specified on the scene then used thoughout the application. If you want to change one of those palette colors you can do so at any level in the scene tree and it will affect that node and all its decendents. Looked-up colors are not looked up until they are applied, so they are live and react to any style changes that might occur, such as replacing a palette color at runtime with the "style" property on a node.
In the following example, all background color of all buttons uses the looked up color "ABC".
.root { abc: #f00 } .button { -fx-background-color: abc }Color Functions
<color-function>JavaFX supports some color computation functions. These compute new colors from input colors at the time the color style is applied. This enables a color theme to be specified using a single base color and to have variant colors computed from that base color. There are two color functions:
derive()andladder().
<derive> | <ladder>Derive
derive( <color> , <number>% )The derive function takes a color and computes a brighter or darker version of that color. The second parameter is the brightness offset, representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors and negative percentages indicate darker colors. A value of -100% means completely black, 0% means no change in brightness, and 100% means completely white.
Ladder
ladder(<color> , <color-stop> [, <color-stop>]+)The ladder function interpolates between colors. The effect is as if a gradient is created using the stops provided, and then the brightness of the provided
<color>is used to index a color value within that gradient. At 0% brightness, the color at the 0.0 end of the gradient is used; at 100% brightness, the color at the 1.0 end of the gradient is used; and at 50% brightness, the color at 0.5, the midway point of the gradient, is used. Note that no gradient is actually rendered. This is merely an interpolation function that results in a single color.
我建议您改为使用 JavaFX 的这些受支持和记录的功能。
在您的 JavaFX 安装包中的 modena.css 文件中有许多使用它们的示例（在 Idea 中搜索项目库中的文件 modena.css）。
关于 IDE 支持（特别是 IntelliJ Idea）
关于在 IDE 中显示从 CSS 解析的颜色的具体支持，它当然会因 IDE 而异。
对于我认为您正在使用的 IntelliJ Idea，我认为支持会因使用的版本而异。我认为免费社区版可能对 CSS 文件的 CSS 解析和颜色显示支持有限或不支持。付费（称为 Ultimate）版本确实支持 CSS 文件的 CSS 解析和颜色显示。
自 2022.1 终极版起，对于 JavaFX CSS，它将准确显示命名颜色的直接分配以及 RGB 和 HSB-defined 颜色以及一些 JavaFX 颜色派生函数。
它不会显示通过 JavaFX looked-up 颜色或某些 JavaFX 颜色派生函数分配的颜色。只要不查找它们，它就会在渐变中显示停止点，但不会显示渐变本身。 Enhancement requests for the IDE 可以为 IDE 增加对查找和派生颜色的颜色显示支持以及对显示渐变的额外支持。