Setting a CSS variable with an inline style and custom field

Loops & Logic
1

Hi there,

Is it possible to set a CSS variable using an inline style with a custom field?

For example:
<style>:root{--icon-color:{Field icon_color};}</style>

I’m unsure of the right syntax, but nothing seems to work.

I’ve used L&L SASS variables before, but this approach has other advantages.

Thanks.

2

I haven’t tested this out myself, but I know things can get tricky when L&L starts blending in languages other than HTML. Since CSS/SASS includes curly braces as a native part of its syntax, it wouldn’t be safe to parse it looking for curly brace tags, so I imagine L&L ignores anything inside a <style> tag. If that’s the case, then you could test whether it’s possible to save your field as a sass variable and then write some inline sass. If that doesn’t work, another approach I’ve used in situations like this is to use Format replace. Let me know if either of those approaches works for you.

1 Like
3

Thanks, I decided to use an inline style, as this works with L&L logic:
<i class="{Field sim_services_icon}" style="color: {Get name=icon_color};"></i>

1 Like