Skip to main content

Variables

also known as custom properties

"A Complete Guide to Custom Properties" on CSS-Tricks The guide explains why custom properties are valuable and how they help in making CSS code more maintainable and reusable.

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

  • CSS variables are a way to store and reuse values in CSS, making it easier to maintain and update stylesheets.
  • CSS variables are declared using the -- prefix and can be used in any property value using the var() function.
  • CSS variables can be scoped to a specific element or inherited by child elements.
  • CSS variables can be used to create complex animations, responsive designs, and theming systems.
  • CSS variables can be manipulated using JavaScript, allowing for dynamic changes to stylesheets based on user input or other events.
  • CSS variables can be combined with other CSS features, such as calc(), media queries, and custom selectors, to create powerful and flexible stylesheets.
  • Declaring CSS variables: CSS variables are declared using the -- prefix, followed by a variable name and a value. For example: --main-color: #f00;. Once declared, the variable can be used in any CSS property value using the var() function, like this: color: var(--main-color);.
  • Scoping CSS variables: CSS variables can be scoped to a specific element using the :root selector, or they can be inherited by child elements. When a variable is defined in the :root selector, it becomes a global variable that can be used throughout the stylesheet.
  • Manipulating CSS variables with JavaScript: CSS variables can be manipulated using JavaScript, allowing for dynamic changes to stylesheets based on user input or other events. This can be done using the setProperty() method of the style object, like this: document.documentElement.style.setProperty('--main-color', '#00f');.
  • Using CSS variables for responsive designs: CSS variables can be used to create responsive designs by defining variables for different screen sizes and using media queries to change the variable values based on the screen size.
  • Creating theming systems with CSS variables: CSS variables can be used to create theming systems that allow users to choose different color schemes or styles for a website or application. By defining a set of variables for each theme, and using JavaScript or CSS to switch between them, you can create a flexible and customizable design system.

Overall, CSS variables are a powerful tool for creating flexible and maintainable stylesheets, and they can be used in a variety of ways to improve the design and functionality of your website or application.

/* declaration */
div {
    --primary-color: green;
}

/* accessing a defined variable */
div {
    color: var(--primary-color);
}

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

/* define them on root pseudo class */
:root {
    --primary-color: #fff;
    --primary-padding: 1rem
}

/* override the value from :root */
.my-item {
    --primary-padding: 1.5rem;
}

/* define a fallback value */
.my-item {
    padding: var(--primary-padding, 1rem);
}