Variables in CSS-Styles?

Classic Servoy
1

Hi,

Is this a way to work with Servoy-Variables in CSS-files? I found this example to work with CSS variables - but it dont work in NG-Client.

Define a css-variable

:root {
  --main-bg-color: brown;
}

Use the css-variable

.mytextbox 
{
  background-color: var(--main-bg-color);
}

But this example is not what I want to do. My idea is to change some properties in the CSS file dynamically. I know there is a way to change the style dynamically. However, I can only access statically stored styles so far.

It would be best if I could the following:

{
  background-color: %%scopes.globals.lnColor%% ;

}

2

Hi, form variables cannot be propagated into CSS.
What are you tryng to achieve here, color some elements conditionally depending on the value of a variable ?
If this is the case what you should do is to add/remove styleClass dinamically in your elements.
For example if a certain condition happens you can add a styleClass to the tabless panel of your main form : elements.tabless.addStyleClass(“my-special-case”);

You can then use CSS to change the look&feel of your elements.

.svy-field {
  /* default color applied to all your fields */
   background-color: white;
}

.my-special-case .svy-field {
   /* This is applied to all the field nested inside the tabless panel when the class my-special-case has been added */
   background-color: yellow;
}

If instead what you are looking for is to use variables in CSS to keep changes in look&feel easy mantainable (when you change a color you change it everywhere is used) then LESS (http://lesscss.org/) fits your need. Using LESS you are allowed to use variables for your stylying and compile it into CSS. Note that in Servoy needs the compiled CSS.

Regards,
Paolo

3

Hi Paolo,
Thank you for your answer .

I know that is not possible to be propagated form-variables into CSS. My quistion was general: Give it a way to defines “placeholder” (or functions/expression) in CSS.
In your example you defined a CSS-Class for the color white and yellow. Than I can switch at runtime. This is great! But I look for a way to define the Color outside of the CSS-File.

Redards,

4

you can’t switch those at runtime, servoy even has basis less support to compile less files to css but this is still a 1 time thing
Not a constant thing, why do you want to replace those place holders?
I guess per client when a client logs in??
You could potentially do that, just have a css file with your place holders in the media, then when a user logs in take that media, replace all the stuff you want
add the changed string as a media then use switch style sheet to switch the user to it.
But don’t do this all the time, do it once as quickly as possible, and remember we can’t cache anything in the browser for this media so it will download everytime,