Using variable in CSS

Introduction

CSS or styled sheets is one of the basic necessities on web designing and web development. It enables one to apply styles on Web-pages to make them elegant and easy to use by the visitors. However, managing these styles can turn into a real nightmare with the increasing number of projects and their scope. Welcome CSS variables, a rather useful addition that can gulp your CSS and make it more managable.

What Are CSS Variables?

CSS variables, also known as custom properties, are like variables in programming languages. They allow you to store values that you can reuse throughout your CSS. This can significantly reduce redundancy and make your stylesheets easier to manage and update.

• Declaration: CSS variables are declared using the - prefix followed by a name and a value.

Example

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

• Usage: Once defined, CSS variables can be used anywhere within the stylesheet by referencing their name.

Example

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

• Dynamic Updates: CSS variables can be dynamically updated using JavaScript, allowing for changes to styles based on user interactions or other events.
• Scope: CSS variables are scoped to the element where they are declared or to the :root pseudo-class, making them accessible throughout the stylesheet.

By using CSS variables, developers can create more maintainable and flexible stylesheets, improve consistency across their designs, and easily update styles across multiple elements.

:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --white: #ffffff;
}

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

h2 {
  border-bottom: 2px solid var(--primary-color);
}

.container {
  color: var(--primary-color);
  background-color: var(--white);
  padding: 15px;
}

Output

Overriding Variables:

:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --white: #ffffff;
}

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

h2 {
  border-bottom: 2px solid var(--primary-color);
}

.container {
  --blue: #0000ff; /* local variable will override global */
  background-color: var(--white);
  padding: 15px;
}

Add a New Local Variable :

:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --white: #ffffff;
}

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

h2 {
  border-bottom: 2px solid var(--primary-color);
}

.container {
  --container-color:#0000ff;/* new local variable */
  background-color: var(--white);
  padding: 15px;
}

Using Variables in Media Queries:

.element {
  --fontsize: 25px;
}
@media screen and (min-width: 400px) {
  .element {
    --fontsize: 50px;
  }
}

Conclusion

CSS Variables, or custom properties are the great way to store and reuse values in the CSS stylesheets. Its use ensures that in the creation of styles there is only necessary coding since other values such as colors fonts and sizes which are frequently used are only just defined by the variables thus making the creation of styles easier. Also, in terms of interactivity and stylish features implemented in web applications, dynamic variables in JavaScripts offer an improved approach. In summary, CSS variables help to enhance entity, sustainability, and variability of CSS styling.

Frequently Asked Questions