26

我一直在检查 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/Experiment.css

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

我在这里做错了什么？

编辑：结论

结论：不可能

当前版本的 JavaFX 似乎无法实现我正在寻找的内容，因为“ JavaFX CSS 参考指南”仅提及“查找的颜色”，而不是“变量”的通用概念。不过，这将是一个很好的功能……只是说……

4

5 回答 5

31

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

* {
   -fx-base2: #e00;
}
.track {-fx-background-color: -fx-base2;}
于 2012-11-26T14:17:35.190 回答
5

我知道这是一个相当古老的问题，但我找不到与我类似的方法的任何答案。正如前面的答案已经说过，除了颜色之外，标准 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 属性导入。也许这个解决方案可以帮助任何人。

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

于 2017-01-23T11:36:49.707 回答
4

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

例如：

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

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

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

于 2018-06-04T08:47:10.213 回答
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;
}

就是这样！

于 2019-06-25T22:53:08.893 回答
1

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

我正在使用这种情况，它工作正常:)

PS 对于当前的 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>
于 2019-03-28T14:41:52.097 回答