Rate this post

You can store values in CSS variables, also called CSS Custom Properties, to use them later in your stylesheet. They facilitate the upkeep and updating of CSS, particularly in expansive projects.

Table of Contents

Declaring a CSS Variable

By default, CSS variables are scoped to the element on which they are declared and are defined with the — prefix. They are usually declared as globally available via the: root selector.

:root {
  --primary-color: #3498db;
  --font-size-large: 18px;
}

How to Declare a CSS Variable

When declaring a CSS variable, the variable name is followed by the — prefix. This is also referred to as the CSS custom property. The variables are usually defined globally so they are accessible from wherever in the CSS by being set inside the: root selector. But if necessary, they may additionally be limited to particular components.

Basic Syntax

:root {
  --variable-name: value;
}

A pseudo-class called: root corresponds to the element, which is the root element. Variables defined here become globally accessible.
The name of the custom property is –variable-name. Prefixing unique properties with — is standard procedure to set them apart from existing properties.
Value is the number that corresponds to a variable, such as size, colour, etc.

Example

This is an illustration of how to declare and utilize a CSS variable:

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --padding-size: 16px;
}

The primary hue value is stored in -colour.
The secondary color is contained in –secondary-color.
The value of –padding-size is a size.

Using a CSS Variable

A CSS variable must be referenced using the var() method to be used.

body {
  background-color: var(--primary-color);
  font-size: var(--font-size-large);
}

Basic Syntax

property: var(--variable-name);

The name for the CSS variable that you’re using in this case is –variable-name.

Example

:root {
  --primary-color: #3498db;
  --padding-size: 20px;
}

body {
  background-color: var(--primary-color);
  padding: var(--padding-size);
}

In this example:

The background colour of the body element has the value –primary-color set.
The value for –padding-size is assigned to the padding.

Using Fallback Values

In the event that the browser does not define or support the variable, you can alternatively use var() to supply a fallback value.

color: var(--secondary-color, #e74c3c); /* Uses #e74c3c if --secondary-color is not defined */

Conclusion

It’s simpler to change and manage your styles when you use CSS variables. You may save duplicate code and apply consistent values throughout your stylesheets by using var() to reference them.

Variable Scoping

Variables might be restricted to particular parts:

.container {
  --primary-color: #2ecc71;
}

.container .text {
  color: var(--primary-color); /* Uses the scoped value */
}

Fallback Values

In the unlikely event that the variable has not been defined, you can supply a backup value:

h1 {
  color: var(--secondary-color, #e74c3c); /* #e74c3c is the fallback */
}
h1 {
  color: var(--secondary-color, #e74c3c); /* #e74c3c is the fallback */
}

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      --main-bg-color: lightblue;
      --text-color: darkblue;
      --padding: 20px;
    }

    body {
      background-color: var(--main-bg-color);
      color: var(--text-color);
      padding: var(--padding);
    }
  </style>
  <title>CSS Variables</title>
</head>
<body>
  <h1>CSS Variables Example</h1>
  <p>Change the variables in one place, and the whole design updates!</p>
</body>
</html>

Summary

Managing styles throughout a website is made flexible and simple with CSS variables. Code is more manageable when values are defined once and then reused.

You can save reusable values (such as colours, sizes, or any other CSS value) in CSS variables, also known as custom properties, for simpler maintenance across your stylesheets. To make them globally available, they are usually defined with the — prefix that follows a variable name and inserted inside the: root selector. After that, you may utilize these variables throughout your CSS using the var() function. Because all references are updated when a variable is changed in one location, updating styles becomes more efficient as a result. For more focused styling, variables may also be defined to particular components.

0 0 votes

Course Rating