XF 2.0 Less vs. CSS in templates

[jkilbride]

When creating a less template in an add-on, I noticed that it's automatically transpiled to CSS. Does it make any difference which file I then include in my templates?

<xf:css src="my_styles.less" />

vs.

<xf:css src="my_styles.css" />

Both work, but is there any advantage to using the pre-compiled css?

 

[Chris D]

If the template you created is called my_styles.less then the template include must also be called my_styles.less. We do compile .less templates to CSS code, but we don't create a .css template.

If my_styles.css is working for you, then it means you have a separate template called my_styles.css.

 

[jkilbride]

@Chris D Thanks for the quick reply.

Actually, I'm editing the file in the filesystem as my_styles.less:

src/addons/MyAddon/_output/templates/public/my_styles.less

But looking in the AdminCP, there are two templates created -- my_styles.less and my_styles.css -- and both work with the "xf:css" tag. I'm just wondering if there's any performance difference between the two. I just don't want to cause the file to have to be compiled (repeatedly) at runtime.

 

[Chris D]

We didn’t and wouldn’t have created the .css version.

I think you’ll find that changes made to the .less version won’t affect the .ccss version.

 

[jkilbride]

@Chris D Sorry, I figured it out. I forgot that my editor has a plugin that automatically transpiles less to css whenever a file is saved. My bad.

I guess since I have both versions, I may as well include the css in the template. One less thing for XF to do. (no pun intended...)

 

[Chris D]

I’d recommend using the Less version.

We compile it at save time so it’s no trouble or performance cost at run time and your editor/transpiler won’t understand some more complex syntax that we support in XF templates.