CSS CUSTOM PROPERTIES (VARIABLES) What CSS Variables are? CSS - - PowerPoint PPT Presentation

▶

Feb 24, 2024 357 likes •456 views

CSS CUSTOM PROPERTIES (VARIABLES) What CSS Variables are? CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. How to use a variable? --my-variable var(--my-variable); BENEFITS

SLIDE 1

CSS CUSTOM PROPERTIES (VARIABLES)

SLIDE 2

What CSS Variables are?

CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document.

SLIDE 3

How to use a variable?

-my-variable

var(--my-variable);

SLIDE 4

BENEFITS

Easier to update
Easier to read
Reduce the amount of typing

SLIDE 5

PURE CSS VARS VS PREPROCESSOR VARS

Preprocessor vars are impossible to spot in

compiled code

Preprocessor vars are static, that means that

you can't change them through media queries

r javascript

SLIDE 6

CSS VARIABLES IN JAVASCRIPT

root.style.setProperty('--mouse-x', 56 + “px”);

SLIDE 7

BROWSER SUPPORT

SLIDE 8

SOURCES

https://medium.com/playgroundinc/css-custom
properties-are-here-383693c05ecb
https://developer.mozilla.org/en-US/docs/Web/

CSS/Using_CSS_variables#Values_in_JavaScri pt

SLIDE 9