Previous

CSS: Variables

Variables in CSS, also known as CSS Custom Properties, allow you to store and reuse values throughout your stylesheets. They provide a way to define values once and use them multiple times, making your CSS more maintainable and easier to update. Here's a guide on how to use variables in CSS:

Basic Syntax

CSS variables are defined using the -- prefix followed by a variable name and a value:

:root {
    --primary-color: #007bff; /* Define a variable */
}

.element {
    color: var(--primary-color); /* Use the variable */
}

In this example:

  • :root is used to define global variables that can be accessed anywhere in the stylesheet.
  • --primary-color is the variable name, and #007bff is the value assigned to it.

Using Variables

You can use variables anywhere in your CSS styles, including properties like color, background-color, font-size, border, etc.

.element {
    color: var(--primary-color); /* Using a variable for text color */
    background-color: var(--secondary-color); /* Using a variable for background color */
    font-size: var(--font-size-large); /* Using a variable for font size */
}

Modifying Variables

Variables can be modified dynamically using JavaScript, media queries, or other CSS rules:

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

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #ffffff; /* Change variable value in dark mode */
    }
}

Cascading and Inheritance

CSS variables follow the cascading and inheritance rules like other CSS properties, allowing you to override variables at different levels of specificity:

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

.element {
    --primary-color: #ff0000; /* Override variable value for this element */
    color: var(--primary-color);
}

Fallback Values

You can specify fallback values for variables to ensure compatibility with browsers that don't support CSS variables:

.element {
    color: var(--primary-color, #007bff); /* Fallback to #007bff if variable is not supported */
}

Example Usage

Here's a more comprehensive example demonstrating the use of variables for a theme:

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --font-size-large: 16px;
}

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

Benefits of Using Variables

  • Reusable Code: Variables allow you to define values once and reuse them multiple times, reducing repetition in your stylesheets.
  • Easy Maintenance: Changing a variable value updates all instances where the variable is used, making maintenance easier.
  • Dynamic Changes: Variables can be modified dynamically, allowing for dynamic theming, dark mode support, etc.
  • Readability: Variables improve code readability by providing meaningful names for values.

Browser Support

CSS variables are supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. Older versions of Internet Explorer do not support CSS variables.

By incorporating variables into your CSS, you can create more flexible, maintainable, and adaptable stylesheets for your web projects.

Previous