- This topic is empty.
-
Topic
-
CSS variables, also known as custom properties, allow you to define reusable values and make your stylesheets more maintainable and easier to read.
1. Defining CSS Variables
CSS variables are defined within a selector and can be scoped to specific elements or global to the entire document. The most common place to define global variables is within the
:root
selector.Syntax:
css:root {
--variable-name: value;
}
Example:
css:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size-base: 16px;
}
2. Using CSS Variables
Once defined, you can use CSS variables by referencing them with the
var()
function.Syntax:
cssproperty: var(--variable-name);
Example:
cssbody {
background-color: var(--primary-color);
color: var(--secondary-color);
font-size: var(--font-size-base);
}
3. Local Scope
CSS variables can also be defined within a specific element’s scope, making them available only within that element and its descendants.
Example:
css.container {
--container-padding: 20px;
}.container {
padding: var(--container-padding);
}.container .content {
margin: var(--container-padding);
}
4. Fallback Values
You can provide a fallback value in case the variable is not defined.
Syntax:
cssproperty: var(--variable-name, fallback-value);
Example:
cssp {
color: var(--text-color, black);
}
5. Changing Variables Dynamically
CSS variables can be updated dynamically using JavaScript, which is useful for theming or responding to user interactions.
Example:
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables Example</title>
<style>
:root{
--main-bg-color: lightblue;
}
body {
background-color:var(--main-bg-color);
}
</style>
</head>
<body>
<button id="changeColorBtn">Change Background Color</button>
<script>
const button = document.getElementById('changeColorBtn');
button.addEventListener('click', () =>
{
document.documentElement.style.setProperty('--main-bg-color', 'lightgreen');
});
</script>
</body>
</html>
6. Nested Variables
You can use CSS variables within other variables.
Example:
css:root {
--base-spacing: 10px;--container-padding: calc(var(--base-spacing) * 2);
}
.container {
padding: var(--container-padding);
}
7. Theming with CSS Variables
CSS variables make it easy to implement theming in your application. You can define theme-specific variables and switch between themes by changing the values of these variables.
Example:
css:root {
--background-color: white;
--text-color: black;
}
[data-theme="dark"] {
--background-color: black;
--text-color: white;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
HTML:
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theming with CSS Variables</title>
<style>
:root {
--background-color: white;
--text-color: black;
}
[data-theme="dark"] {
--background-color: black;
--text-color: white;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
</style>
</head>
<body>
<button id="themeToggleBtn">Toggle Theme</button>
<script>
const button = document.getElementById('themeToggleBtn');
button.addEventListener('click', () =>
{
document.documentElement.toggleAttribute('data-theme');
});
</script>
</body>
</html>
So:
- Defining Variables: Use
:root
for global variables. - Using Variables: Apply variables with the
var()
function. - Local Scope: Define variables within a specific element for local use.
- Fallback Values: Provide fallback values for variables.
- Dynamic Updates: Change variables dynamically with JavaScript.
- Nested Variables: Use variables within other variables.
- Theming: Implement themes by defining and switching variable values.
- Defining Variables: Use
- You must be logged in to reply to this topic.