How to use CSS Variables

CSS Variables, also known as CSS Custom Properties, are a type of variable in CSS that allow developers to declare reusable values that can be used throughout the stylesheet. They are similar to variables in programming languages, such as JavaScript, and allow for dynamic and flexible styling.

CSS Variables are defined using the — prefix followed by a custom name, and they can be used anywhere in the stylesheet by referencing the variable name with the var() function. The value of a CSS Variable can be changed dynamically using JavaScript, allowing for easy theming and customization.

Here is an example of defining and using a CSS Variable:

:root {
  --main-color: #3498db;
}

.button {
  background-color: var(--main-color);
  color: white;
  padding: 10px;
  border-radius: 5px;
}

In this example, we define a CSS Variable named –main-color with the value #3498db. We then use this variable in the background-color property of the .button class by referencing it with the var() function. Any changes made to the value of –main-color will be automatically applied to the background-color of all elements that use this variable.

CSS Variables provide many benefits, including:

• Easy theming: by defining variables for colors, fonts, and other styling properties, developers can easily switch themes without having to modify individual styles.
• Dynamic styling: by using JavaScript to change the value of CSS Variables, developers can create dynamic and interactive styles that respond to user input and other events.
• Consistent styling: by using variables to store and reuse values, developers can ensure that styling is consistent across the website or application, making it easier to maintain and update styles.

Few examples of CSS Variables

Here are a few examples of CSS Variables and how they can be used:

Defining a font size variable

:root {
 --font-size: 16px;
}

body {
 font-size: var(--font-size);
}

In this example, we define a CSS Variable named –font-size with the value of 16px. We then use this variable in the font-size property of the body element by referencing it with the var() function. If we later decide to change the default font size, we only need to modify the value of the –font-size variable in one place.

Using variables for color

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.button:hover {
  background-color: var(--secondary-color);
}

In this example, we define two CSS Variables –primary-color and –secondary-color with the values of blue (#007bff) and gray (#6c757d), respectively. We then use these variables in the background-color and hover background-color properties of the .button class. This allows us to easily change the primary and secondary colors of the website or application by modifying the values of these variables.

Using variables for spacing

:root {
  --spacing: 20px;
}

.container {
  margin: var(--spacing);
}

.box {
  padding: var(--spacing);
  margin-bottom: var(--spacing);
}

In this example, we define a CSS Variable named –spacing with the value of 20px. We then use this variable in the margin property of the .container class and the padding and margin-bottom properties of the .box class. This allows us to easily adjust the spacing between elements by changing the value of the –spacing variable.

CSS Variables provide many benefits, including making styles more flexible, maintainable, and consistent. By using variables for colors, fonts, spacing, and other styling properties, developers can easily modify and update styles throughout their website or application.

Using variables for border styles

:root {
  --border-width: 2px;
  --border-color: #ccc;
}

.box {
  border: var(--border-width) solid var(--border-color);
  padding: 10px;
  border-radius: 5px;
}

In this example, we define two CSS Variables –border-width and –border-color with the values of 2px and #ccc, respectively. We then use these variables in the border property of the .box class to create a solid border with a width of 2px and a color of #ccc. This allows us to easily change the border width and color of the .box element by modifying the values of these variables.

Using variables for responsive design

:root {
  --mobile-width: 768px;
  --desktop-width: 1024px;
}

.container {
  max-width: var(--mobile-width);
}

@media screen and (min-width: var(--desktop-width)) {
  .container {
    max-width: var(--desktop-width);
  }
}

In this example, we define two CSS Variables –mobile-width and –desktop-width with the values of 768px and 1024px, respectively. We then use these variables in the max-width property of the .container class, with a media query that adjusts the max-width value for desktop screens. This allows us to easily create responsive designs that adapt to different screen sizes by using CSS Variables to store and reuse common values.

:root {
  --font-size: 1rem;
  --line-height: 1.5;
}

@media (min-width: 768px) {
  :root {
    --font-size: 1.25rem;
  }
}

body {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

In this example, we define two CSS Variables –font-size and –line-height with the values of 1rem and 1.5, respectively. We then use these variables for the font-size and line-height properties of the body element. We also define a media query that updates the –font-size variable to 1.25rem for screens wider than 768px. By using variables for responsive design, we can easily adjust the font size and other properties across multiple breakpoints without having to write new CSS rules for each screen size.

Using variables for animations

:root {
  --animation-duration: 2s;
  --animation-timing-function: ease-in-out;
}

.box {
  animation: rotate var(--animation-duration) var(--animation-timing-function) infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
  --text-color: #343a40;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

button {
  background-color: var(--primary-color);
  color: white;
}

a {
  color: var(--secondary-color);
}

:root {
  --header-height: 64px;
  --footer-height: 48px;
  --sidebar-width: 240px;
}

header {
  height: var(--header-height);
}

footer {
  height: var(--footer-height);
}

main {
  margin-left: var(--sidebar-width);
}

:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
}

document.documentElement.style.setProperty('--primary-color', '#ff0000');