【问题标题】：Declaring Variable In JavaFX CSS File在 JavaFX CSS 文件中声明变量
【发布时间】：2012-11-14 00:14:39
【问题描述】：

我一直在检查 Oracle 在 JavaFX 运行时库中分发的“caspian.css”，我看到他们已将一些颜色值声明为变量。例如：

-fx-base: #d0d0d0; // Caspian.css, Line 47

...然后他们将其用作其他属性的值，例如：

-fx-color: -fx-base; // Caspian.css, Line 96

现在，我要做的是声明一个测量单位（-fx-radius-default: 10px），然后在每次需要设置控件的半径时使用它，例如：

-fx-border-radius: -fx-radius-default;
-fx-background-radius: -fx-radius-default;

到目前为止，我一直没有成功。我的问题是：这可能吗？

编辑：添加实验细节

详情

这是我在 JavaFX Scene Builder 1.1 上创建的 Experiment.fxml 文件：

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <TextArea layoutX="200.0" layoutY="119.0" prefWidth="200.0" styleClass="track" wrapText="true" />
  </children>
  <stylesheets>
    <URL value="@css/Experiment.css" />
  </stylesheets>
</AnchorPane>

下面是我用过的css/Experiment.css：

* {
    -fx-radius-default: 10px;
}
.track {
    -fx-border-radius: -fx-radius-default;
    -fx-border-color: black;
}

不幸的是，这不起作用，给出如下错误消息：

在从样式表文件中的规则“*.track”解析“-fx-border-radius”时无法解析“-fx-radius-default”：/home/abdullah/codebase/src/package/css/实验.css

如果我使用普通语法 (-fx-border-radius: 10px)，那没有问题。

我在这里做错了什么？

编辑：结论

结论：不可能

目前的 JavaFX 版本似乎无法实现我正在寻找的内容，因为“JavaFX CSS Reference Guide”只提到了“查找的颜色”，而不是“变量”的通用概念。不过，这将是一个很好的功能......只是说......

【问题讨论】：

我不知道实现起来是否容易或实用，但目前看起来 JavaFX 的定义自己的 css 属性的类使用 javafx.css.CssMetaData 类
我知道这是一个老问题，但我添加了一个可能会改变你结论的答案。 take a look

标签： css javafx-2

【解决方案1】：

不幸的是，它似乎只适用于颜色。但是您需要确保您的变量在使用它的规则中是“可见的”：

* {
   -fx-base2: #e00;
}
.track {-fx-background-color: -fx-base2;}

【讨论】：

在您回答后，我在我的问题中添加了一些细节。你能回顾一下吗？谢谢。
我也在OTN JavaFX2 forums 上问过同样的问题。如果没有其他人给出肯定的答案（或解决方法），我会接受你的答案。感谢您的回复。

【解决方案2】：

我知道这是一个相当古老的问题，但我找不到与我类似的方法的任何答案。正如前面的答案已经说过，除了颜色之外，标准 css 是不可能的。（如有错误请指正）

不过，如果您使用的是 less，则有可能。我在我的一个 JavaFX 项目中使用较少，而且效果非常好。你只需要配置你的构建过程来编译你的 less 文件并生成实际的 css 文件。我在我的项目中使用了 maven，您可以在下面找到我的构建配置。

<build>
    <!-- exclude less files from output directory -->
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <excludes>
                <exclude>**/*.less</exclude>
            </excludes>
        </resource>
    </resources>

    <plugins>

        <plugin>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.3</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.0.2</version>
        </plugin>

        <plugin>
            <groupId>com.zenjava</groupId>
            <artifactId>javafx-maven-plugin</artifactId>
            <version>8.7.0</version>
            <configuration>
                <mainClass>com.example.project.Main</mainClass>
            </configuration>
        </plugin>

        <plugin>
            <artifactId>maven-assembly-plugin</artifactId>
            <configuration>
                <archive>
                    <manifest>
                        <mainClass>com.example.project.Main</mainClass>
                    </manifest>
                </archive>
                <descriptorRefs>
                    <descriptorRef>jar-with-dependencies</descriptorRef>
                </descriptorRefs>
                <appendAssemblyId>false</appendAssemblyId>
            </configuration>
        </plugin>

        <!-- maven less plugin which I'm using to compile the less files -->
        <plugin>
            <groupId>biz.gabrys.maven.plugins</groupId>
            <artifactId>lesscss-maven-plugin</artifactId>
            <version>1.2.1</version>
            <executions>
                <execution>
                    <goals>
                        <goal>compile</goal>
                    </goals>
                    <configuration>
                        <sourceDirectory>${project.basedir}/src/main/resources/com/example/project</sourceDirectory>
                        <outputDirectory>${project.build.outputDirectory}/com/example/project</outputDirectory>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

有了这个配置，我现在可以少用，定义自定义变量也没有问题。我在我的项目中使用了一个 color-catalogue.less 文件，所有其他 less 文件都可以通过 import 属性导入。也许这个解决方案可以帮助任何人。

编辑：如果有人感兴趣，可以在here 找到一个工作示例。

【讨论】：

如果您创建一个包含较少和变量的工作示例并将其上传到 github，那将会很好。你认为呢？谢谢
只是想添加它也可以使用 sass/scss，经过简短的比较后，我发现它更适合我的目的。

【解决方案3】：

对您的答案稍作修正：数字也可以，而不仅仅是颜色。

例如：

*{
    -preferred-scroll-bar-thumb-size: 25;
}

.scroll-bar:vertical .thumb {
    -fx-pref-width: -preferred-scroll-bar-thumb-size;
}

为我工作，JavaFx 将值“25”作为“25px”（如果我写了“25px”，它会失败）。它并不像使用 less/sass 那样完全是变量，但它可以帮助那些不需要更多的人。

【讨论】：

我无法确认这一点，尝试定义字体大小时出错。
也无法确认这一点。使用数字会导致 ClassCastException，java.lang.Double 不能大小写为 com.sun.javafx.css.Size

【解决方案4】：

我将我的 css 代码分开。

我创建了一个名为 all.css 的导入器文件，代码如下：

@import url("Root.css");
@import url("Base.css");
...

在 Root.css 文件中，我设置了变量：

.root {
    -fx-color1: #FFFF00;
    -fx-color2: rgb(255,255,0);
    -fx-color3: rgba(255,255,0, 0.5);
}

现在，我可以在导入（Root.css）之后在所有导入代码中调用变量。例如在 Base.css 中。

.bg-yellow1 {
    -fx-background-color: -fx-color1;
}

就是这样！

【讨论】：

欢迎来到 StackOverflow。 OP 正在尝试为测量单位设置变量，并且如他们的问题和接受的答案中所述，变量只能用于颜色。因此，尽管您的回答受到赞赏，但它并没有真正提供现有答案中的任何其他信息。

【解决方案5】：

在grill2010's solution的插件中：
我建议在“生成资源”阶段将 SCSS 与 maven 的构建器（插件）一起使用到 CSS 中。因此，您可以为任何选择器使用任何数字或颜色的变量。

我正在使用这个场景，它工作正常:)

附：您不能直接在当前 OpenJFX 版本的 CSS 文件中执行此操作。

           <plugins>
                <plugin>
                <groupId>com.github.warmuuh</groupId>
                <artifactId>libsass-maven-plugin</artifactId>
                <version>0.2.10-libsass_3.5.3</version>
                <executions>
                    <execution>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>compile</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <outputPath>${project.build.directory}/generated-sources/resources</outputPath>
                    <inputPath>${basedir}/src/main/resources</inputPath>
                    <!--<includePath>${basedir}/src/sass-plugins/</includePath>-->
                    <outputStyle>nested</outputStyle>
                    <generateSourceComments>false</generateSourceComments>
                    <generateSourceMap>false</generateSourceMap>
                    <sourceMapOutputPath>${project.build.directory}/generated-sources/resources
                    </sourceMapOutputPath>
                    <omitSourceMapingURL>true</omitSourceMapingURL>
                    <embedSourceMapInCSS>false</embedSourceMapInCSS>
                    <embedSourceContentsInSourceMap>false</embedSourceContentsInSourceMap>
                    <precision>5</precision>
                    <enableClasspathAwareImporter>true</enableClasspathAwareImporter>
                    <copySourceToOutput>false</copySourceToOutput>
                </configuration>
            </plugin>

            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>build-helper-maven-plugin</artifactId>
                <version>3.0.0</version>
                <executions>
                    <execution>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>add-source</goal>
                        </goals>
                        <configuration>
                            <sources>
                                <source>${project.build.directory}/generated-sources/resources</source>
                            </sources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>

【讨论】：