Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2021-04-03 06:19:23

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,774
Website GitHub Twitter

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.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#2 2021-04-03 06:40:17

etc
Developer
Registered: 2010-11-11
Posts: 4,546
Website GitHub

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 :-)

Offline

#3 2021-04-03 07:33:34

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,186
Website

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

#4 2021-04-03 08:49:19

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,512
Website

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 ?

Offline

#5 2021-04-03 10:15:45

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,774
Website GitHub Twitter

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.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#6 2021-04-03 12:00:44

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,545
Website GitHub Twitter

Re: CSS Variables

Offline

#7 2021-04-03 15:08:42

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,774
Website GitHub Twitter

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.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#8 2021-04-28 06:14:40

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,186
Website

Re: CSS Variables

Some more examples of practical uses for css variables from Ahmad Shadeed.


TXP Builders – finely-crafted code, design and txp

Offline

Board footer

Powered by FluxBB