Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
CSS Variables
I’m trying to get my head around CSS variables. It doesn’t matter how I think about. it, I cannot understand how they are better or more convinient to classes.
For example how this is better
--text-color: black;to
.black {color:black;}Does anyone know enough to tell us the advantages?
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: CSS Variables
Hi Yiannis,
as I get it, the main advantage is the possibility to manage variables in a central place:
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
}Now, if you want to tweak your ‘blue’ colour, you need to do it only in --blue variable declaration.
Though you can do it with classes too, variables look more natural and don’t pollute the markup. You also can use them in calc() and Javascript, but that’s all I know :-)
Online
Re: CSS Variables
Another nice aspect is that they can be redeclared dynamically, so they can acquire a different value in a different use context, e.g. using media queries to vary wrapper and column widths, margins and gutters, or for particular requirements like higher contrast.
A common example you see – e.g. here – is redeclaring groups of CSS variables in blocks to do things like a dark mode switcher.
You can also use that for themes. The other day, there was a query here about changing a full-page background image per section. If your page background is dark, you need light text, if your page background is light, dark text. You could place all of that in a Presentation › Style block and then set that style for the section, and include the redeclared variables (perhaps in a theme block) in your page. Done.
You can expand the same context when making themes for Textpattern. Using switchable css variables in the styles pane, you can provide different variants of a theme layout. Max Böck has an example that shows that, though you’re unlikely to need to vary the look live on page as in his example.
See ishadeed’s CSS Variables 101 for many more examples.
TXP Builders – finely-crafted code, design and txp
Offline
Re: CSS Variables
Nitpicking: it is actually a CSS custom property :-)
But yeah, Oleg and Jacob have answered most of it. There is lots you can do with those things. Math for example. Here is an example I am using combined with variable fonts:
@media (prefers-color-scheme: dark) { :root { --font-weight-multiplier: 0.875; } }
body { font-weight: calc(400 * var(--font-weight-multiplier, 1)); }For the computed value, in Dark Mode, you then have body { font-weight: 350; }
Last edited by phiw13 (2021-04-03 08:49:45)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Offline
Re: CSS Variables
Thanks so much guys. I am now slightly wiser. My only wish is that they could accept multiple values. The closest I found was this hack.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: CSS Variables
And you can use variables within other variables
Offline
Re: CSS Variables
philwareham wrote #329664:
And you can use variables within other variables
Thanks Phil,
That is indeed the kind of tutorial I was looking for.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: CSS Variables
Some more examples of practical uses for css variables from Ahmad Shadeed.
TXP Builders – finely-crafted code, design and txp
Offline
Pages: 1