View source for Css Variables

[[Category:CSS]]

To declare a variable, you first need to decide which scope the variable should live in. If you want it to be available globally, simply define it on the ''':root pseudo class.''' It matches the root element in your document tree (usually the <html> tag).

 :root {
   --main-color: #ff6f69;
 }

The variable must start with '''two dashes'''.


To access a variable, you need to use the '''var()''' function, and pass in the name of the variable as the parameter.
 #title {
   color: var(--main-color);
 }


== Declaring a local variable ==

You can also create local variables, which are accessible only to the element it’s declared at and to its children. This makes sense to do if you know that a variable only will be used in a specific part (or parts) of your app.

For example, you might have an alert box which uses a special kind of color which aren’t being used other places in the app. In that case, it might make sense to avoid placing it in the global scope:

 .alert {
   --alert-color: #ff6f69;
 }
This variable can now be used by its children:

 .alert p {
   color: var(--alert-color);
   border: 1px solid var(--alert-color);
 }

== Responsiveness ==
 :root {
   --main-font-size: 16px;
 }
 media all and (max-width: 600px) {
   :root {
     --main-font-size: 12px;
   }
 }
And with those simple four lines of code you have updated the main font size across your entire app when viewed on small screens

== Accessing variables with JavaScript ==
 var root = document.querySelector(':root');
 var rootStyles = getComputedStyle(root);
 var mainColor = rootStyles.getPropertyValue('--main-color');
 console.log(mainColor); 
 --> '#ffeead'
To update the CSS Variable simply call the setProperty method 
 root.style.setProperty('--main-color', '#88d8b0')

-----
See Also [https://scrimba.com/g/gcssvariables https://scrimba.com/g/gcssvariables]