Ответ 1

К сожалению, он работает только для цветов. Но вам нужно убедиться, что ваша переменная "видима" из правила, которое ее использует:

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

Ответ 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. Возможно, это решение помогает любому.

Изменить. Если кому-то интересно, здесь можно найти рабочий пример здесь.

Ответ 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, но это может помочь людям, которым не нужно больше, чем это.

Ответ 4

В аддоне для решения grill2010:
Я рекомендую использовать SCSS с maven builder (плагин) в CSS на этапе "создания ресурсов". Таким образом, вы можете использовать переменные с любыми числами или цветами для любого селектора.

Я использую этот сценарий, и он отлично работает :)

PS Вы не можете сделать это непосредственно в файле CSS для текущих версий OpenJFX.

           <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>

Ответ 5

Я всегда разделяю мой код 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;
}

Это!