CSS Variables & JavaScript

For the past couple of days, I’ve been working on enhancing my vanilla JavaScript. I’ve been practicing using tutorials from JavaScript30.com, which is a free 30-day coding challenge that builds 30 different projects within 30 days. It uses no frameworks, compliers, libraries, or boilerplates. While I’m currently on Day 5, I’ve learned plenty of new concepts and ways of tackling certain topics. One concept that stuck with me was the lesson on CSS variables and using JavaScript to manipulate them.

CSS Variables

CSS variables, also known as custom properties, are entities that contain specific values that can be used throughout a document. This is especially helpful for complex websites that have very large amounts of CSS with repeated values. If a color needs to be changed, it would be easier to change the variable, which will then be referenced in multiple other places, rather manually changing each one. Custom properties are subject to the cascade and inherit their value from their parent.

Basic Usage & Syntax

Declaring a CSS variable is done using a name that begins with a double hyphen (--) and a property value that can be any valid CSS value. This is then written inside a ruleset and is defined within the scope of that ruleset. As a common best practice, custom properties are defined on the :root pseudo-class, so it can be applied globally across the HTML document (and manipulated using JS).

CSS Variable Syntax

As with above, we’ve defined three CSS variables under :root. In order to insert these values, CSS uses the var() function. Typical syntax is as follows and can be coded out in the CSS file below:

var(name, value)name = the variable name (required)
value = fallback value if the variable is not found (optional)
Inserting CSS Variable

Using CSS Variables with JavaScript

In the lesson from JavaScript30, we were tasked to adjust the spacing, blur, and color border of an image utilizing JavaScript & CSS variables. Given the index.html file below, it currently display the following page:

index.html code
View of index.html

In order to complete this task, we would need to add event listeners to the sliders and ensure the sliders are changing the correct CSS variables. We can utilize the properties of each input in order to incorporate the correct information and also use style.setProperty to change the value of the CSS variable. For the usage of the sliders, we will include two different event listeners, one to confirm the change and one to confirm the sliding effect:

script.js file
Finished index.html

Conclusion

While SASS also has custom variables that can be used to reference a value throughout the code, the variables in SASS are not accessible anywhere else in the code. With CSS variables, the access to the custom variables provides a more dynamic way to manipulate the page as with above. While this is just a simple way to use this capability, this opens up possibilities when it comes to larger, complex websites.

To follow the rest of my progress through JavaScript30, my projects will be deployed on my website soon!

Resources:

  1. “Using CSS custom properties (variables),” MDN Webdocs Mozilla, accessed Nov 28, 2020, https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
  2. “CSS Variables — The var() Function,” w3schools, accessed Nov 28, 2020, https://www.w3schools.com/css/css3_variables.asp
  3. “SS Change Variables With JavaScript,” w3schools, accessed Nov 28, 2020, https://www.w3schools.com/css/css3_variables_javascript.asp

--

--

--

Software Engineer based out of the San Francisco Bay Area. Flatiron School graduate with 8+ years background in healthcare.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Mocking an API request with Mock Service Worker and TypeScript

Card Image with black background and Mock Service Worker Logo with bold white text that says "Mock Service Worker Mocking Post Requests"

JavaScript Callback Functions

Interview Preparation

Deploying Angular Universal v6+ with Firebase 🚀 🔥

GraphQL NoSQL Injection Through JSON Types

Start Your Project With React and Tailwind CSS

The Linked List Data Structure

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Scott Espinosa

Scott Espinosa

Software Engineer based out of the San Francisco Bay Area. Flatiron School graduate with 8+ years background in healthcare.

More from Medium

Promises in JavaScript

Add to cart button HTML | add to cart HTML & CSS javascript

Greeting the World in JavaScript

Chapter 20: Advanced CSS Selectors and JavaScript Selector Functions