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

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 ● Easier to update ● Easier to read ● Reduce the amount of typing

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 or javascript

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

BROWSER SUPPORT

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

THANK YOU!!!!!