How to use CSS variables in OutSystems
Photo by Pankaj Patel on Unsplash
Have you ever had to develop an application with a default layout, where there is a set of colors that will be reused to keep the look-and-feel consistent? Well, if you work with OutSystems, sooner or later you’ll have to, so let me introduce you to a cool feature that can save (a lot!) of time and keep your application organized, and easy to maintain.
OutSystems 11 brought some cool upgrades, such as the internal browser used inside Service Studio to preview screens and blocks, thus supporting new CSS constructors such as CSS variables. Meaning that the use of these variables was already possible in previous versions, but now we have an accurate preview in design time.
Throughout this article, I’ll explain what CSS variables are, and how and why it is important to use them, with as many examples and case scenarios as possible. I highly recommend that you have a rudimentary knowledge of CSS in order to understand some concepts approached in the article.
What are CSS variables, and why should you use them?
CSS variables are defined by the developer and contain specific values to be reused throughout a document. It can be a color, a type of display, an amount of space, any property really.
CSS variables are easy-to-learn and incredibly useful, whether you’re a beginner or an expert in OutSystems you’ll catch on really quick. The only reason not to use this feature is if your application needs to be used in Internet Explorer. This browser is not compatible with CSS variables since, according to Microsoft, the development of new features for Internet Explorer has ceased.
How to declare and access variables in OutSystems 11?
The first step to use variables is, of course, declaring them. Declaring a variable in CSS is done by writing a double hyphen (--), then the custom property’s name, and finally a valid CSS property. Be aware that the variables are case sensitive, which means that “--mainColor” and “--maincolor” are two different variables.
It is a good practice to declare them in the :root pseudo-class. Why? First, it collects all your variables in one place for easy maintenance. Second, :root matches the whole page (essentially everything in the <html> element), so it makes all your variables global in scope.
It is quite simple to access the value of a variable, just call the function “var()”, with the custom name of the variable inside the parenthesis.
The image below represents an example of how the variables can be defined and accessed through the function “var()”.
Inheritance of properties
Custom properties follow standard cascade rules, which means that the same property can be defined at different levels. It also means that if no value is set for a specific property on a certain element, the value of its parent is used. Take the example below:
In the example above, the variable “color-primary” is defined in the :root, but also in the class “blueContainer”. This means that this variable’s value will be “red” everywhere in our HTML document unless in elements with the class “blueContainer”.
Now, let’s look at the example below where exists:
A container without any class defined,
Inside of this one, another container with the class “blueContainer”,
Inside of the second, a container without any class defined.
The first container doesn’t have any class defined, so the value of the background color will be the initial value. However, the second container has a class, so it will inherit the background color defined there, blue, as can be seen below. At last, the third container doesn’t have any class defined but will inherit the background color of its parent and, therefore, will be blue as well.
What happens with invalid values?
When the return of the “var()” function is an invalid property, the browser needs to handle this.
In these cases, one of two things can happen: either the value of the property is inherited, if possible, or; the initial value of that property is used.
Check the example below where we are assigning the value “block” to the property background-color.
In the last example, the third container inherits the property of the parent because its property isn’t defined. In this example, the container has the property defined, but it’s invalid, so it’ll try to inherit the property of the parent (blue).
If the parent didn’t have that property defined, the background color would be the initial one, like in the first container.
Fallback values
The “var()” function enables the possibility of declaring fallback values to the variable, i.e., the value that the function will return if the variable’s value is not valid.
This feature is not used to fix browser compatibility, if the browser doesn’t support CSS custom properties, the fallback value won’t help. It’s only used as a backup so the browser can choose a different value if the property is invalid or the variable is not defined.
Check the image below to see an example of how this can be used.
Case study
Let’s imagine the scenario where a client asks for an application with a red header, a red footer, red default buttons, and red header text. Below is the final appearance of the application.
However, as everyone changes their mind, the client decides that the color used isn’t quite right and asks to change that color to a different tone.
If you use variables in your CSS, you can make all of these changes just by replacing the property when declaring that variable, as seen below.
By changing the value of the variable, we’ll be changing the color everywhere that variable is being used. To accomplish this without using variables, we would need to change the property in every single place we’re using it, which would consume much more time.
Below, we have our new renewed screen.
Browser compatibility
Below, find a list of the minimum browser version that supports, or not, the use of CSS variables. (source: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
Thanks!
Thanks for reading this article. I hope you had fun and learned something useful to use in your applications.
Like this article? Share it:
