-
Hi team,
I would like to create some global styles (utility classes) that allow me to format an H3 like an H1, or an H2 like an H3, etc.
I would like to create these global styles in such a way that I can use them in all future projects.
Therefore I would prefer to define the font sizes via variables.Can I create a font-size as a variable within a global style?
e.g. something like this: font-size: var(- -h1) ?Thanks for help
-
Hi Stefanie,
Yes, you should be able to do so.
But it might not show in the editor unless you force the editor to load the font size CSS
:root {--h1:60px;} -
Hi Ying,
I have tried this, but unfortunately the variable is not accepted.
See URL… unless you force the editor to load the font size CSS
I don’t understand exactly what you mean here.
-
Did you define the variable
--h1somewhere?It shows it’s not defined.
https://app.screencast.com/FtrBdUX6Mp8g9 -
Did you define the variable –h1 somewhere?
Ahaa, I had thought that this would work in the same way as with the colors.
I defined the headlines h1 – h4 in the customizer. So I thought that this would automatically create variables, just like with the colors.
But maybe that doesn’t work for the font sizes? 🤔
Or maybe it’s because I set the font sizes via fluid typography?
questions about questions 😉
-
The customizer typography does not generate variables, so when you set a font-size for h1, the CSS is just:
h1 { font-size:60px; }not:
:root { --h1:60px; }However, you can use variables in the customizer typography, for example, set h1’s font-size to
var(--h1), and add this CSS to your CSS stylesheet::root { --h1:60px; } -
Ok, got it!
And it works perfectly 🙂Thank you!
-
You are welcome 🙂
- You must be logged in to reply to this topic.