Support CSS Variables in Service Studio

By Leonardo Fernandes on 8 Feb

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;
}
J.8 Feb

Yup,


time to upgrade to the modern times!

if they incorporate this in silkui/themes it would be much easier to alter themes accordingly.


Interesting idea but maybe a little bit too soon to adopt an experimental technology as it states in CSS Variables in particular consider the very low adoption so far within browsers.

J.9 Feb

I beg to differ:

http://caniuse.com/#search=variables

(of course IE is slacking, but what is new)


J: Microsoft Edge recently got support for the standard, but it's still on insider preview (build 14986): https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6261292-css-variables


The W3C spec is on Candidate Recommendation level since Dec 2015 (first Working Draft being from 2012), and they are already working on the Proposed Recommendation. The experimental argument isn't going to last long. Besides, I really think that the SilkUI theming and components would benefit (as in be simplified) by this feature.


I also would like to link to Philip Walton's blog post explaining with great depth why CSS Variables are not equivalent (and in fact, very different) from CSS preprocessors.

This would be a nice one!

So, now every major browser supports CSS Variables: http://caniuse.com/#feat=css-variables