Create Pixel Perfect, Scalable Designs Using CSS Variables

Variables may be thought of as a means to store and reuse values. The core advantage of using variables is the reusability factor - enabling developers to reuse the same value & when meaningfully named, variables can enhance code readability.

We can use these variables inside our CSS as well, termed CSS Variables - these are simple variables that developers declare to reuse particular CSS properties throughout a page, either globally or locally. The syntax is easy enough: specify the property, such as - heading-size: 30px, then use it using the var() method.

Many web developers even use SASS, a CSS pre-processor, that served as an extension of CSS & provides more advanced properties. We can specify variables in SASS, along with a variety of additional features not available in regular CSS. The approach is the same, but we save a variable value using the $ sign rather than two hyphens.

However, since SASS is a preprocessor, the SASS variable turns into normal CSS when compiled. Because of that, SASS variables do not exist in the generated code and hence, you cannot access them in your browser. This makes using variables inside native CSS better for development when compared to SASS.

On the other hand, thanks to JavaScript, we can access CSS variables inside the browser and modify their values.

To properly understand the benefits of CSS variables, let's first look at what it was like before they were used.

Declaring CSS Property Without Variables

To be more specific, we can declare CSS properties without declaring CSS variables.

For example in index.html:-

.home-page{  background-color: #2C2C2C; }

In the same way, we have to define inside about.html or project.html files.

.about-page{  background-color: #2C2C2C; }

Duplicating the same code on different pages is bad practice, and it could lead to unexpected errors as well.

All of these issues can be resolved by using CSS variables.

Why Use CSS Variables

Modern apps tend to have several pages & screens and are complex to build, therefore it becomes necessary to create designs and prototypes before starting the actual development. These designs need to have uniform colors, fonts, and styling to convey a brand identity & theme.

It becomes increasingly challenging when we have to define several of these properties. So, we can simply prevent errors by establishing a variable with a distinct name dependent on the page.

To begin with, it makes no sense to use CSS variables for each of your CSS properties - you only need to convert those properties you plan to reuse in your app into variables.

So, when specifically? Assume you are specifying the same background or text color for a number of pages or sections. If you use the same CSS attributes, such as background color for several parts, adopting CSS variables in this situation is a wise decision. This helps establish the same design language across multiple pages.

How To Declare These Variables

We already discussed that CSS variables are custom CSS properties with unique names and values.

It has the following syntax: var( - name, value)

- name: The variable name must begin with two dashes ( - name).
value: It is optional.

Now let's discuss the two methods by which we may create CSS variables:

Global variables: These variables may be accessed/used throughout the document; we only need to define them within the root selector.
Local variables: Local variables, on the other hand, may only be utilized within the selector where they are declared.

Let us explain with the simplest example possible. Within the body tag, we have specified two tags.

<body> 
<h1>Locofy</h1> 
<p>One of the best no-code platform.</p> 
</body>

Now let's define the CSS variables globally.

/* Defining global variables  */ 
:root { 
--bg-color: blue; 
--text-color: white; 
}

Now let's set the CSS variables to the specific HTML tags.

body { 
background-color: var(--bg-color);
} 
h1 { 
color: var(--text-color); 
}

Here's what the complete code will look like:

<html> 
<head> 
<title>CSS Variables</title> 
<style> 
/* Defining global variables  */ 
:root { 
--bg-color: blue;
--text-color: white;
} 
/* var() function used here */ 
body { 
background-color: var(--bg-color); 
} 
h1 { 
color: var(--text-color); 
} 
p {
color: var(--text-color); 
}
</style> 
</head> 
<body> 
<h1>Locofy</h1> 
<p>One of the best no-code platform.</p> 
</body> 
</html>

Change CSS Variables with JavaScript

You can update your CSS variables dynamically using JavaScript as well, such as changing the button color or showing red borders around an input field to signify some error.

Let's take an example of a simple website page where the text size increases when a button is pressed.

HTML

<p>The below button will change my font size.</p> 
<button type="button" onclick="getFontSize()">Get font size</button> 
<button type="button" onclick="setFontSize()">Set font size</button>

Here we are defining a paragraph tag. Following that, we defined two buttons: one to get the font size and the other to change it.

CSS

:root { 
--font-size: 30px; 
} 
p { 
font-size: var(--font-size); 
}

Now, let's define a global variable in the root selector. After that, we are setting the font size to the p tag.

Now it's time to change the font size with the help of javascript.

JavaScript

var getProperties = document.querySelector(':root'); 
function getFontSize() { 
var value = getComputedStyle(getProperties); 
alert("Font size is: "+ value.getPropertyValue('--font-size'));
} 
function setFontSize() { 
getProperties.style.setProperty('--font-size', '60px'); 
}

Here, we define a variable named getProperties, which will hold all of the variables stored in the root selector.

Later, we defined two functions: one to display the current font size and another to set a new font size.

That's it - the font size of the paragraph tag will increase from 30px to 60px.

Where Can CSS Variables Be Used?

With an example, we learned about CSS variables and how to modify CSS variables with JavaScript. It's now time to put it into your project.

All the top frameworks, such as React, Angular & Vue support CSS variables out of the box. And it's as simple as what we've seen in this post.

CSS variables allow builders to reuse their properties and create a uniform, scalable design systems for their projects.

However, going from your design file to a high-quality code that uses CSS variables can not only be time-consuming but also a bit challenging for developers since they may not fully understand which properties should be converted to variables.

This is where Locofy can greatly help. Using the Locofy.ai plugin for Figma, you can not only export your designs into production-ready code in React, React Native, HTML-CSS, Gatsby & Next.js, but the plugin can also generate CSS variables.

Locofy refers to your Figma Styles to generate CSS variables. Moreover, it detects commonly reused variables, for example, fonts, and padding, & converts them to CSS variables as well.

Hope you like it.

That's it - thanks.

Originally published at Locofy.