XF 2.0 Option variable in .less

[Tealk]

Hi,

i would like to query an option in a .less file but unfortunately it doesn't seem to work properly.
Is the syntax there different?

    <xf:if is="$xf.options.test">
        & .test        {background: #3b5998;}
    <xf:else />
        & .test            {background: #dd4b39;}
    </xf:if>

//Edit
I have noticed that I have to save the .less every time I change the option so that the changes take effect.

 

[Lukas W.]

Haven't looked into the actual specifics of why it happens but my guess would be, that your browser caches the old version until you resave it, at which point xf sends a refetch request. FWIW you can change the option into a style property, and it'll work. We do that in our styles.

 

[Chris D]

Style properties are not a bad idea, and essentially what they're designed for.

In some cases, that's not always worth implementing, so there is a simpler approach; just switch the class names using a conditional in the template:

<div class="myDiv {{ $xf.options.test ? 'test' : '' }}">

And Less:

.myDiv
{
    background: #dd4b39;

    &.test
    {
        background: #3b5998;
    }
}

 

[Tealk]

Thanks @Chris D nice Idea but I can't use it like this. I use the snippet for my social footer in combination with FA5.
it should be the switch between fa4 and fa5

 

[S Thomas]

In your footer template, do sth like this:

<xf:if is="{$xf.options.test}">
    <xf:css src="fa5.less" />
</xf:if>

And then move the FA5 specific stuff into its own template

 

[Tealk]

Unfortunately not the nicest way since I have such a large part of the stylesheet double but thank you @S Thomas