XF 2.0 Using @xf-responsiveWide not working...

[mjda]

When I try to use @xf-responsiveWide in my template it's not working properly. It's actually showing "@xf-responsiveWide" in the final page css.

Here is the CSS I added into my template

@media (max-width: @xf-responsiveWide)
{
    .styling-here{}
}

Nothing happens when I use that, but if I add 900px in there instead, it works just as I'm expecting it to work. Is there something I'm maybe missing here?

 

[mjda]

Nevermind. I figured it out. Guess if the template is called template-name.css then it doesn't work but if you change the template name to template-name.less then it works just fine. Maybe a bug?

 

[Mike]

If you specify an extension of CSS, you're opting out of LESS parsing and this pattern is a LESS-style construct. You would have to use the template syntax version {{ property('responsiveWide') }}.

 

[mjda]

If you specify an extension of CSS, you're opting out of LESS parsing and this pattern is a LESS-style construct. You would have to use the template syntax version {{ property('responsiveWide') }}.

Ahh, thanks for the info Mike. I'll just stick to using LESS from now on. I also noticed that when using CSS the code isn't minified like it is when using LESS either.