Chapter 15: CSS Variables (Custom Properties)
15.1 What are CSS Variables?
CSS Variables, also known as custom properties, allow you to store values in reusable variables. They improve code maintainability and enable dynamic styling without duplicating code.
Syntax:
/* Defining a variable */
:root {
--main-color: #007bff;
--padding-size: 10px;
}
/* Using a variable */
button {
background-color: var(--main-color);
padding: var(--padding-size);
}
15.2 Advantages of CSS Variables
- Reusability: Define a value once and use it across multiple styles.
- Dynamic Updates: Easily change values globally by updating the variable.
- Maintainability: Reduces duplication and improves readability.
- Theme Support: Enables light/dark mode or other dynamic themes.
15.3 Defining and Using Variables
CSS variables are usually defined within the :root selector, making them globally accessible:
:root {
--font-size: 16px;
--primary-color: #28a745;
}
body {
font-size: var(--font-size);
color: var(--primary-color);
}
Variables can also be defined locally within a specific element or selector:
.card {
--card-bg: #f8f9fa;
background-color: var(--card-bg);
}
15.4 Fallback Values
You can provide a fallback value if a variable is not defined:
button {
background-color: var(--secondary-color, #6c757d);
}
In this case, the button will use #6c757d if --secondary-color is not set.
15.5 CSS Variables and Theming
CSS variables make it easy to implement themes:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark-mode {
--bg-color: #000000;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
Switching between themes involves toggling the dark-mode class on the <body> element.
15.6 Example: Dynamic Styling with Variables
Here’s an example of a button that changes style dynamically:
<style>
:root {
--btn-bg: #007bff;
--btn-hover: #0056b3;
}
button {
background-color: var(--btn-bg);
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: var(--btn-hover);
}
</style>
<button>Click Me</button>
15.7 Best Practices for CSS Variables
- Define global variables in the
:rootselector for easy access. - Use meaningful names for variables, e.g.,
--primary-color,--font-size. - Leverage variables for consistent styling across your project.
- Combine variables with media queries for responsive designs.
15.8 Summary
In this chapter, you learned:
- The purpose and advantages of CSS variables.
- How to define and use variables with
var(). - Fallback values for variables.
- How to create themes with CSS variables.
- Best practices for organizing and using variables effectively.
In Chapter 16, we will explore CSS Preprocessors like SASS and LESS!
){kind=link}
0 Comments