CSS Variables

• Declaring and using CSS variables
• Advantages of CSS variables
• Scope and inheritance of variables

CSS Variables

CSS Variables, also known as Custom Properties, allow you to define reusable values in your CSS. They enable easier maintenance and flexibility by storing values that can be reused throughout your stylesheet.

---

1. Declaring and Using CSS Variables

a. Declaring CSS Variables

CSS variables are declared using the -- prefix, followed by the variable name. They are defined within a CSS rule, and their values can be any valid CSS value, such as colors, dimensions, or even complex values like gradients.

Syntax:

:root {
  --primary-color: #3498db;
  --padding: 10px;
  --font-stack: "Helvetica, Arial, sans-serif";
}

• :root: The :root pseudo-class targets the highest-level element in the document (usually the html element). Declaring variables in :root makes them globally available throughout the stylesheet.

b. Using CSS Variables

CSS variables are used by referencing them with the var() function. This function can be used anywhere a CSS value is required.

Syntax:

.element {
  color: var(--primary-color);
  padding: var(--padding);
  font-family: var(--font-stack);
}

• var(--variable-name): The var() function takes the name of the variable and returns its value.

c. Fallback Values

The var() function can also accept a fallback value, which is used if the variable is not defined.

Syntax:

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

• Fallbacks: Fallbacks ensure that the CSS will still render even if a variable is missing or not supported.

---

2. Advantages of CSS Variables

CSS Variables offer several advantages, especially in large and complex stylesheets where consistency and maintainability are crucial.

a. Reusability

CSS variables allow you to define a value once and reuse it throughout your stylesheet. This reduces repetition and ensures consistency.

Example:

:root {
  --primary-bg: #f0f0f0;
  --secondary-bg: #e0e0e0;
}

.header {
  background-color: var(--primary-bg);
}

.footer {
  background-color: var(--secondary-bg);
}

• If you need to change the background color, you only need to update the variable, and the change is reflected across all elements that use it.

b. Maintainability

When working on large projects, managing colors, font sizes, or other values can become cumbersome. With variables, you can make global changes by updating a single value.

Example:

:root {
  --main-color: #ff5733;
}

.button {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
}

• If the primary color needs to change, updating --main-color changes it across all elements using that variable.

c. Theming

CSS variables make it easy to implement themes. You can define multiple sets of variables for different themes and switch between them by updating the variable values.

Example:

:root {
  --background: #ffffff;
  --text-color: #333333;
}

.dark-theme {
  --background: #333333;
  --text-color: #ffffff;
}

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

• Applying the .dark-theme class changes the theme by overriding the variable values.

d. Responsiveness and Media Queries

CSS variables can be updated within media queries, allowing for responsive design without duplicating code.

Example:

:root {
  --padding: 20px;
}

@media (max-width: 600px) {
  :root {
    --padding: 10px;
  }
}

.container {
  padding: var(--padding);
}

• The padding changes dynamically based on the screen width, ensuring a responsive design.

---

3. Scope and Inheritance of Variables

a. Global Scope

Variables declared in the :root pseudo-class have global scope, meaning they are accessible anywhere in the document.

Example:

:root {
  --global-color: #2ecc71;
}

h1 {
  color: var(--global-color);
}

p {
  color: var(--global-color);
}

• Here, --global-color is accessible in both the h1 and p elements.

b. Local Scope

Variables can also be scoped to specific elements. When a variable is defined inside a specific rule, it is only accessible within that rule and its descendants.

Example:

.container {
  --local-color: #9b59b6;
  color: var(--local-color);
}

.container p {
  color: var(--local-color);
}

.other-element {
  color: var(--global-color); /* Can't access --local-color */
}

• The variable --local-color is only available within .container and its children.

c. Inheritance

CSS variables inherit their values from parent elements, just like normal CSS properties. If a child element doesn’t define a variable, it will inherit it from its parent.

Example:

.parent {
  --color: #e74c3c;
  color: var(--color);
}

.child {
  /* Inherits --color from .parent */
  background-color: var(--color);
}

• In this example, .child inherits --color from .parent.

d. Overriding Variables

Variables can be overridden in a more specific scope. When a variable is redefined within a nested element, it takes precedence over the inherited value.

Example:

.parent {
  --padding: 20px;
}

.child {
  --padding: 10px; /* Overrides the parent's value */
  padding: var(--padding);
}

• The .child element uses its own --padding value instead of the inherited one.

---