Definition and Basic Usage of CSS Variables

Definition of CSS Variables

CSS variables are a mechanism in CSS that allow developers to define reusable values, such as colors, fonts, or spacing, and apply them consistently across a stylesheet. They are stored in the CSS document and can be referenced anywhere in the code, reducing duplication and improving maintainability.

CSS variables are declared using the -- prefix, typically within the :root selector or in a CSS file. For example:

:root {
  --primary-color: #333;
}

This defines a variable --primary-color with the value #333.

Basic Usage of CSS Variables

Declaring Variables

Variables can be defined in the CSS file or embedded in the HTML using the data- attribute. For instance:

<style>
  .my-class {
    --background-color: var(--primary-color);
  }
</style>

Here, --background-color is a variable that references --primary-color, which is defined in the CSS file.

Applying Variables in CSS

Variables can be used in CSS properties to apply consistent values. For example:

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

This ensures that the background color and font family are set using the defined variables, making the code easier to update.

Overriding Variables

Variables can be overridden with specific values using the !important directive or by defining a new variable with the same name. For example:

.my-class {
  background-color: #fff !important;
}

This overrides the --primary-color value to #fff in the .my-class selector.

Scope of CSS Variables

CSS variables have a scope based on where they are defined:

• Global: Variables defined in the :root selector are available throughout the entire stylesheet.
• Local: Variables defined within a specific selector (e.g., a class or ID) are only accessible within that scope.

For example:

:root {
  --global-color: #000;
}

.my-class {
  --local-color: #fff;
}

Here, --global-color is accessible globally, while --local-color is only accessible within .my-class.

Practical Examples

Example 1: Customizing a Theme

A theme can be defined using CSS variables to maintain consistency across a website:

:root {
  --primary-color: #333;
  --accent-color: var(--primary-color);
}

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

This creates a theme with a primary color and an accent color that can be easily adjusted in one place.

Example 2: Responsive Design

Variables can be used to create responsive designs by adjusting values based on screen size:

@media (max-width: 600px) {
  :root {
    --font-size: 14px;
  }
}

.header {
  font-size: var(--font-size);
}

This scales the font size for smaller screens, ensuring responsiveness.

Example 3: Dynamic Values

Variables can be dynamically defined using JavaScript to update values in real-time:

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

This changes the primary color of the document's HTML element, updating the entire stylesheet.

Key Benefits of CSS Variables

CSS variables enhance code organization by reducing repetition and making it easier to maintain consistent values. They also allow for dynamic updates, such as changing colors or fonts in a single location. By leveraging variables, developers can create more modular and scalable CSS code.