AliIybar: Created page with "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 '''..."

2018-09-05T13:09:32Z

Created page with "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 '''..."

New page

[[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]

Css Variables - Revision history

AliIybar: Created page with "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 '''..."