CSS Variables (aka Custom Properties) makes it possible to organize and refactor stylesheets. They are already supported by every major browser, except for Edge, which will add it soon.
You can already use CSS variables in OutSystems applications. But Service Studio doesn't understand them, and the design-time preview will have low fidelity.
With this CSS module, you can declare custom variables, and then use them throughout the stylesheet. For example:
:root { --primary-color: #9E0616;
}
a {
color: var(--primary-color);
}
/* ... and many other styles could use var(--primary-color) */In such a stylesheet, changing the primary color requires only changing one line.
This would greatly simplify the instantiation of a theme, because the variable can be declared with a default value on the theme, and when a consumer inherits the theme, it simply overrides the variable value:
/* On the theme (e.g. LisbonTheme stylesheet): */
:root { --primary-color: /* default */ #000;
}
a {
color: var(--primary-color);
}
/* On the application theme (e.g. MyApp stylesheet): */
:root {
--primary-color: #9E0616;
}