Gamepedia Help Wiki
Register
No edit summary
No edit summary
Line 4: Line 4:
 
* 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 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 [https://www.specifishity.com/ 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!
 
* We can "interrupt" the cascade, so to speak - the [https://www.specifishity.com/ 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? ==
 
== How do I use them? ==

Revision as of 22:45, 23 June 2021

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.

: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 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. If we had BOTH of these definitions at the same time, then in light skin, the light ones will apply due to the cascade, and the default ones will apply in the dark skin.

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 its' 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).

See also