Variables slots + the Style Column

This recipe assumes you know how to use  ⁠⁠Variables⁠  (including variable slots) as well as  The Style Column .

One use case for variable slots is to make complex styles easier.

For example, here the Fire Tales card has a different background color to the Fruits of the forest card. You can see that the style difference here is the rgba bit in the description style cells: rgba(229, 218, 235, 1) vs rgba(225, 225, 239, 1)



Add a caption...

Now, we could just define each of these styles as it's own variable, and say replace { background: rgba(229, 218, 235, 1)} with $purpleBg. However, what happens if you also want some borders on some zones to be that same shade of purple? And some text too? Variable slots allow us to do separate out the bits of the styling in a way that lets us be more flexible later on. Consider an approach where we define the variables like this:



Add a caption...

Note how the $col and $bg variables are essentially the generic bits of the style, which have a slot ready to be filled with a particular value. Note too, that we've set our rgba colors to variables $purple and $teal.

Now to get the correct background color for our cards, we can just do it by feeding in the color variable into the variable slots like this:



Add a caption...

You can also now set the text color for any zone now in the same way (using $col[$teal]):



Add a caption...

The advantage here is that if you later decide you want a different shade of purple, you can simply update the rgba value for the $purple variable, and it will change everywhere it's used across your project.