CODEWITHSUNDEEP
cssjavafx
Ayoub.A
Ayoub.A

Reputation: 2093

JavaFX: CSS variables

I have four buttons that I want to style the same way except that each one of them has a unique image. there are three styles one for normal state and the others are for hover and focused states. Doing this in CSS which is the recommended way would take a lot of repetition, and I searched in the net and it seems variables are not supported in CSS. So is there a way around this, or would it be more pragmatic to do this in code.

Upvotes: 1

Views: 448

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18649

Using CSS correctly will avoid repetition. You can share code between four buttons in one of a few ways.

Have the buttons share a class and style their differences:

<div id="btn1" class="button">Button 1</div>
<div id="btn2" class="button">Button 2</div>
<div id="btn3" class="button">Button 3</div>
<div id="btn4" class="button">Button 4</div>

<style>
    .button {
      color: blue;
      background: white;
      /* etc... */
    }

    #btn1 { background-image: url('uniqueimage1.png');
    #btn2 { background-image: url('uniqueimage2.png');
    /* etc... */
</style>

Or, less preferably...

Target multiple elements in one CSS rule:

<div id="btn1">Button 1</div>
<div id="btn2">Button 2</div>
<div id="btn3">Button 3</div>
<div id="btn4">Button 4</div>

<style>
    #btn1, #btn2, #btn3, #btn4 {
      color: blue;
      background: white;
      /* etc... */
    }

    #btn1 { background-image: url('uniqueimage1.png');
    #btn2 { background-image: url('uniqueimage2.png');
    /* etc... */
</style>

Upvotes: 1

Related Questions