详细

Question

我一直在检查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 Reference Guide”只提到“查找颜色”，而不是“变量”的通用概念。这将是一个很好的功能，但是......只是说......

Answer 1

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

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

Answer 2

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

尽管如此，如果您使用 less ，也可以。我在我的一个JavaFX项目中使用较少，而且效果非常好。您只需配置构建过程即可编译较少的文件并生成实际的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 文件，其他所有较少的文件都可以通过import属性导入。也许这个解决方案可以帮助任何人。

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

Answer 3

只需对您的答案进行一些修正：也可以使用数字，而不仅仅是颜色。

例如：

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

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

适合我，JavaFx的价值是＆＃39; 25＆＃39;作为＆＃39; 25px＆＃39; （如果我写了＆＃39; 25px＆＃39;它会失败）。它不像使用less / sass那样完全是变量，但它可以帮助那些不需要更多的人。

Answer 4

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

我正在使用这种情况，它可以正常工作：）

P.S。对于当前的OpenJFX版本，您不能直接在CSS文件中执行此操作。

{
  _id: 'A',
  fruits: {banana: 1, apple: 1, pineapple: 3, melon: 1, guava: 2}
}

Answer 5

我分开了我的CSS代码。

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

mapview

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

library(tidyverse)
library(sf)
library(mapview)

palfunc <- function (n, alpha = 1, begin = 0, end = 1, direction = 1) 
{
  colors <- RColorBrewer::brewer.pal(11, "RdBu")
  if (direction < 0) colors <- rev(colors)
  colorRampPalette(colors, alpha = alpha)(n)
}

set.seed(92)
foo <- franconia %>% mutate(foo = (rnorm((n())) + 2))

max_val = max(abs(foo$foo), na.rm = T)
n_val = max( length(unique(keep(foo$foo, ~.x > 0))),
             length(unique(keep(foo$foo, ~.x < 0))))

#creating a dummy polygon which all of its boundaries point are the same
a_dummy_m <- matrix(c(10.92582, 49.92508, 10.92582, 49.92508,
                    10.92582, 49.92508, 10.92582, 49.92508,
                    10.92582, 49.92508),ncol=2, byrow=TRUE)

a_dummy_p <- st_multipolygon(list(list(a_dummy_m), list(a_dummy_m), list(a_dummy_m)))

#mimicking foo structure to make a point with negative value of absolute maximum
dummy_neg <- structure(list(NUTS_ID = "N/A", SHAPE_AREA = st_area(a_dummy_p),
              SHAPE_LEN = st_length(a_dummy_p), CNTR_CODE = structure(1L, 
                                                .Label = "N/A", class = "factor"), 
              NAME_ASCI = structure(1L, .Label = c("N/A"), class = "factor"), 
              geometry = structure(list(a_dummy_p), class = c("sfc_MULTIPOLYGON", "sfc"),
              precision = 0, bbox = st_bbox(a_dummy_p), 
              crs = structure(list(epsg = 4326L, 
                     proj4string = "+proj=longlat +datum=WGS84 +no_defs"), 
                     class = "crs"), n_empty = 0L), 
                     district = "N/A", foo = -max_val), sf_column = "geometry", 
              agr = structure(c(NUTS_ID = NA_integer_, SHAPE_AREA = NA_integer_, 
                     SHAPE_LEN = NA_integer_, CNTR_CODE = NA_integer_, 
                     NAME_ASCI = NA_integer_, district = NA_integer_, 
                     foo = NA_integer_), 
             .Label = c("constant", "aggregate", "identity"), class = "factor"),
              row.names = 1L, class = c("sf", "data.frame"))


#and now making the data with positive value 
dummy_pos <- dummy_neg %>% mutate(foo=max_val)

#row binding those with `foo` dataset to make a new dataset which is "balanced"
foo2 <- rbind(dummy_neg, dummy_pos,foo)

mapView(foo2, zcol = 'foo', layer.name = "Example", col.regions = palfunc)

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

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

就是这样！

在JavaFX CSS文件中声明变量

详细

结论：不可能

5 个答案: