Using css vars and UIKit

[gornycreative]

So I'm trying to rework a number of sites to using css variables - how are people doing with with UIKit - heavily modified theme LESS files or are you scrapping the LESS compile process completely?

[Stefanowitsch]

I have a website where the client can set different colors via input fields on a page in the backend. I want to make use of those colors as CSS vars to use them in my stylesheets. I am doing it this way:

<style>
  :root {
    --primary-color: <?=$globalSettings->bg_colorcode?>;
    --secondary-color: <?=$globalSettings->font_colorcode?>;
    --tertiary-color: <?=$globalSettings->titlefont_colorcode?>;
  }
</style>

Then I can simply "grab" those variables in my stylesheets:

header {
  background: var(--primary-color);
}

I am using UIKit and LESS and this is working for me.