3
 Followers
31
 Likes

Support CSS Variables in Service Studio

On our radar

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;
}
Created on 8 Feb 2017
Comments (13)
8 Feb 2017

Yup,


time to upgrade to the modern times!

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


9 Feb 2017

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.

9 Feb 2017

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

CSS variables already work inside the browser, but Service Studio seems to have a problem with it as it reverts back to the base theme's default colour scheme.  Has anyone been able to get the variables to display  correctly in Service stutio?

As far as I know, Service Studio doesn't support CSS variables, so there's no way to get it working in design time.

You might can use the -servicestudio tag in the stylesheet so show the right color in servicestudio

I have tried that, but it didn't work. Are you saying that you got it working? If so, could you please share a stylesheet demonstrating it?

No didn't tried it but Tjaart mentioned he got it working withing the browser but not in SS since it changes back to default theme. That problem might get solved with the servicestudio tag?

Yeah, it doesn't solve the problem. I think Service Studio uses an older version of WebKit that didn't have this feature yet, or had it under an experimental flag.

Well also don't like that solution since it would propable generate a lot of empty css files (I had some servicestudio tag on webblocks to make my layout in SS look good, OS doesn't generate that tag in the css, but it does creates the webblock css file (which is empty because only had the servicestudio tag in it). So in the end there were 15+ empty css files generated).

views
293
Followers
3