Declaring Variable In JavaFX CSS File

Unfortunately it seems to work only for colors. But you need to ensure that your variable is "visible" from rule which uses it:

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

Just a little correction to your answers: it is possible also with numbers, not only colors.

For example:

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

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

Works for me, and JavaFx taking the value '25' as '25px' (if I wrote '25px' it would fail). It's not exactly variables as with using less/sass but it can help people that don't need more than this.


I know it is a quite old question but I couldn't find any answer with a similar approach as mine. As the previous answer already says it is not possible with standard css except for colors. (Please correct me if I am wrong)

Nevertheless, it is possible if you are using less. I use less in one of my JavaFX projects and it works really well. You just have to configure your build process to compile your less files and generate the actual css files. I used maven in my project and below you can find my build configuration.

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

With this configuration I'm now able to use less and there is no problem to define custom variables. I use a color-catalogue.less file in my project which all other less files can import via the import attribute. Maybe this solution helps anyone.


Edit: If anyone is interested, a working example can be found here.

Tags:

Css

Javafx 2