https://github.com/gerhynes/css-variables
A page to play with manipulating CSS variables using JavaScript. Built for Wes Bos' JavaScript 30 course.
https://github.com/gerhynes/css-variables
css-variables javascript javascript30
Last synced: 6 months ago
JSON representation
A page to play with manipulating CSS variables using JavaScript. Built for Wes Bos' JavaScript 30 course.
- Host: GitHub
- URL: https://github.com/gerhynes/css-variables
- Owner: gerhynes
- Created: 2017-10-03T21:37:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-19T17:51:40.000Z (about 8 years ago)
- Last Synced: 2025-01-31T11:49:42.657Z (12 months ago)
- Topics: css-variables, javascript, javascript30
- Language: HTML
- Homepage: https://gk-hynes.github.io/css-variables/
- Size: 2.93 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [CSS Variables](https://gk-hynes.github.io/css-variables/)
A page to play with manipulating CSS variables using JavaScript. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.
[](https://gk-hynes.github.io/css-variables/)
## Notes
CSS variables can be updated on thr fly with JavaScript.
CSS variables are declared on an element or root.
``` css
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
```
To use a CSS variable use ```var(--variable-name)```
``` css
img {
padding: var(--spacing);
}
```
```document.querySelector()``` returns a node list, not an array.
A node list has far fewer methods. It does, however, have ```forEach()```.
The spacing and blur variables have suffixes. Use data-attributes to handle this: ```data-sizing="px"```.
``` javascript
const suffix = this.dataSet.sizing || "";
```
```dataSet``` is an object that will contain all of the data attributes from that specific element.
Update the variables by selecting the entire document and setting a property of base, spacing, and blur.
Then update the value inside ```handleUpdate()```:
``` javascript
document.documentElement.style.setProperty(`${this.name}`, this.value + suffix);
```
When you use a CSS variable you can update that variable on any element and any selectors inside of the element which reference that variable will be updated.