Nativescript: CSS Variables support

[bundyo]

Nearly all major browsers support CSS variables natively now (except Edge, which still has some bugs in 15). Support of CSS variables can greatly simplify the styling of an app and provide better support for theming when SASS is not used.

Maybe it is time to implement them in NativeScript?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[NateVonSmith]

pleeeeeease 🙏 🙏 🙏

[rafaband]

If NativeScript add SASS support and solve the bugs for development for sure i migrate all my ionic app to NS

[bundyo]

NativeScript works with SASS from long time ago. Most CLI start templates are with SASS set up and used.

[crowmagnumb]

What about the original variable issue mentioned here? I am currently converting a big chunk of my angular web components to shared web/nativescript components and the lack of variable support is plaguing me. Everywhere I use a CSS variable I have to make a special case for nativescript and use a scss variable. This is not only sad and annoying but now means that my nativescript versions of these components are hard-coded to my default theme. Would love to have the css variable support! Cheers.

[bundyo]

While we wait for official support, you can use PostCSS for CSS variable support. Tried it and it works.

[m-abs]

We could also use this in our projects, so I've started implementing it.

~I intend to add support for both calc and css-variables.~
I've added support for both calc and css-variables.

[Izrab]

+1 for CSS Variables

[bundyo]

CSS variables support was already merged, so it will be released with 6.1.

[crowmagnumb]

Well I refactored all my css to get rid of my variable dependency but good to know that I can rely on this again in the future. :)

[mfcarneiro]

Thanks @bundyo. I will wait for 6.1 version to start my app :sweat_smile:

[AnthonyLenglet]

Support has landed, however I'm still wondering one thing about this

when working on websites, people usualy use ::host in order to store all of their variables

what would be the equivalent here ?

---

Edit: Found the answer shortly after asking, the class ns-root is added to the root view, we can also add different variables for the os, device type and orientation

everything is right here:
https://docs.nativescript.org/angular/ui/styling#root-views-css-classes

variables.css

.ns-root {
  --scarlet: #FF2400;
}

styles.css

.bg_red {
  background-color: var(--scarlet);
}

hooray! 🎉

[m-abs]

@AnthonyLenglet

You should also define them in ns-modal, if you're using modal-views in your application.

I'm not sure about other renders for nativescript, but nativescript-angular does support :host in the component stylesheet.

Like this my.component.scss:

:host {
  --scarlet: #FF2400;
}

.bg_red {
  background-color: var(--scarlet);
}

[AnthonyLenglet]

I'm not sure about other renders for nativescript, but nativescript-angular does support :host in the component stylesheet.

Like this my.component.scss:

:host {
  --scarlet: #FF2400;
}

.bg_red {
  background-color: var(--scarlet);
}

I have all my variables in a file called variables.css that I have imported in by app.android.css and app.ios.css, and in this case, :host and ::host both don't seem to work, I end up getting:

Style: Failed to get value for css-variable "--scarlett" used in "background-color"=[var(--scarlett)] to ActionBar(13)

[thlcodes]

Short question: is overwriting css-variables via inline style supported?
E.g.:

.button {
  --color: red;
  color: var(--color)
}

<Button class=".button" style="--color: green" text="Button" />

Does not work for me currently ...