XF 2.0 Option variable in .less

Tealk

Well-known member
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?
CSS:
    <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.
 
Last edited:
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.
 
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:
HTML:
<div class="myDiv {{ $xf.options.test ? 'test' : '' }}">

And Less:
Less:
.myDiv
{
    background: #dd4b39;

    &.test
    {
        background: #3b5998;
    }
}
 
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
 
In your footer template, do sth like this:
HTML:
<xf:if is="{$xf.options.test}">
    <xf:css src="fa5.less" />
</xf:if>
And then move the FA5 specific stuff into its own template
 
Top Bottom