What is a CSS variable, and why do we care?[]
CSS variables are a magical syntax that allow you to define a value in one place and use it in many other places. This has two main benefits:
- We can write the same thing fewer times, which makes changing it easier. Instead of changing in 10000 places, we can change in 1 place.
- We can "interrupt" the cascade, so to speak—the order in which CSS does things, we get to violate that in a way, by putting CSS variables near the bottom, so that it has to go all the way back to the top again! Woah! Cool! Super cool!
How do I use them?[]
Defining variables[]
Well if you're using ThemeDesigner, TD will just do it all for you, magically. Yay! But you should also know the syntax.
Explanation of cascade[]
:root {
--color-blue-side:#0000FF;
--color-red-side:#FF0000;
}
We now have variables called --color-blue-side and --color-red-side that are defined in the ROOT scope. This means they are available EVERYWHERE, but also at the least level of specificity. Remember what I said about the cascade in the intro? Yeah, the variable definitions cascade too.
.theme-fandomdesktop-light {
--color-blue-side:#00EAFF;
--color-red-side:#F86060;
}
Now we've defined these variables in .theme-fandomdesktop-light, so that they're a much lighter color. Where we have BOTH of these definitions at the same time (aka in light skin) the light ones will apply due to the cascade, and the default ones will apply in the dark skin.
How you would actually do this IRL[]
When defining variables for real, don't use the :root scope unless you really mean it. Simply define one scope for .theme-fandomdesktop-dark and one for .theme-fandomdesktop-light, like this:
.theme-fandomdesktop-dark {
--color-blue-side:#0000FF;
--color-red-side:#FF0000;
}
.theme-fandomdesktop-light {
--color-blue-side:#00EAFF;
--color-red-side:#F86060;
}
However, sometimes really you do want to use the cascade, such as redefining part of your theme within a special .april-fools class that you apply to one page on April Fools' Day. So our first example did things slightly incorrectly, in order to teach you how the cascade works.
Using variables[]
.blue-team {
background-color:var(--color-blue-side);
}
Now, this class will have either the dark blue or the light blue, no matter which theme is selected! The cascade finds .blue-team and is like "yay I'm done! I got to the background-color!" But then it's like "awwwwwww I got a VARIABLE nowwwwwwwwwwww what" and it has to go ALL THE WAY BACK and look at all of the applicable variable definitions til it finds the most specific one, thereby redoing the entire cascade! omg! Then it gets to either the light variable definition or the dark variable definition, and THEN it applies it and it's done. Hooray!
Note that the alternative would have been to hard-code the colors TWICE here, once for .theme-fandomdesktop-light .blue-team and once for .theme-fandomdesktop-dark .blue-team. So by giving us the ability to interrupt the cascade, LITERALLY EVERY SINGLE color definition gets to be written only a single time. So the first bullet point is magnified like 100x (or, okay, 2x).
Inline variables[]
We just showed how to use variables inside a CSS file like MediaWiki:Common.css. But can you use variables inline, like this?
<div style="background-color:var(--color-blue-side);">Blue team adopted 10 kittens!</div>
- On originally-Gamepedia wikis: Yes, but please make every attempt to use classes instead.
- On originally-Fandom wikis: No
If you want to empower your non-admin users to style elements flexibly, I'd suggest defining one class per variable that ONLY applies it as a background color or font color, depending on what it's intended for. (If it's a pair of variables intended to be used together under all circumstances, background-color & color, you could consider pairing them together for a class with two rules instead of just one.) Then document this list of classes somewhere that your users can find, and ensure they are always using these classes when they need the color you've made!