Can't get Sass variables to work

Loops & Logic
#1

I can’t seem to get Sass variables to work, it always displays as Array.

Here’s what I’m using in my template

<Set sass=color type=raw><Field show_color_1 type=raw /></Set>

Here’s what I’m using in the style tab:

body {
  background: $color;
}

I developer’s console I just get:

body {
    background: Array;
}

If I leave the “type” out of the variable I get:

body {
    background: "Array";
}

The field I'm using is an ACF color picker but I've tried just passing a plain text field with the same result.
#2

Hey Paul! What does it look like if you just try outputting that field on the front end without passing it as a sass variable? In other words, what does the <Field show_color_1 /> field contain?

Also, what is that type=raw attribute supposed to be doing? In the docs I’m seeing that you can use the type attribute to specify a post type in combination with either id or name to get the fields from a specific post (basically a shortcut instead of wrapping it in a Loop tag in instances where you’re not displaying fields from the current post) but raw seems like it’s probably not referring to a post type on your site, so my hunch is that you’re sorta inventing your own syntax there which might be your issue.

#3

Thanks Benjamin.

<Field show_color_1 /> shows the color correctly. eg #a260ff

The type=raw I’m using based on the documentation here:

By default, the value is wrapped in “quotes” to create a string. Use the type attribute for other value types: number, color, list, map, and raw. (These all work the same by passing unquoted value.)

I think maybe I’m just misunderstanding how the Sass module works.

#4

Right, that docs page is for the Set tag, but I meant when you used the type=raw inside the Field tag, like this: <Field show_color_1 type=raw />. I’m not seeing that in the documentation anywhere. Does removing that fix your issue? I also haven’t tested this out myself yet but if that doesn’t fix things, maybe try setting type=color on the Set tag to see if that works better. Let me know what you find!

#5

Yeah I was just trying stuff out to see if I could get it to work. Removing the tag doesn’t work and neither does changing the type to color in the Set tag.

I tried to simplify it:

<Set sass=color type=color>#f5f5f5</Set>

& then in the style tab:

body {
  background: $color;
}

but this just shows as:

body {
    background: Array;
}

in the front end.

#6

Hey Paul, I was able to test this a bit more thoroughly today and confirm that there seems to be some kind of bug there. I also tested the same template with version 2.4.4 and it worked as expected so it seems in the update to 3.x something must have gone awry. I’ve let the devs know and I’ll report back in this thread when it’s been resolved.

#8

Hey Paul, want to give this another shot? I just tested this on my end and the issue seems to be fixed in version 3.1.1

JS variable values not quoted anymore
#9

Thanks @benjamin, can confirm it’s working now.