CSS file with LESS variables

Question

I need create customization of web template and give my customers form to configuration of styles.

I created styles of website in LESS, and when customer changes some setting in form (and click submit) PHP creates dynamically CSS files based on LESS code, and customer settings.

I am using less.php. But dynamically generating CSS from LESS is very slow. That is why I want to create "CSS file" with LESS variables, and I want to automatically generating final CSS file from "CSS file" with variables, and after using only str_replace() to change variable to value. It will be faster solution!

Example:

LESS file

@color: red;
.container {
    .box {color: @color; }
}

final CSS file

.container .box {color: red; }

but I need to generate "CSS file" with LESS variables, like this:

.container .box {color: @color; }

How can I generate file like this?

Can you post the code which you tried till now? (content of less.php) — Sriraman, Mar 03 '15 at 08:49
Well, in short: there's no way to generate such file from a Less source (just because there's no such tool). The only way is to write such thing manually. — seven-phases-max, Mar 03 '15 at 11:41

score 1 · Answer 1 · answered Mar 03 '15 at 08:57

1

You don't seem to understand what LESS is, LESS is a CSS preprocessor that compiles code into CSS. CSS does not support variables so what you are asking doesn't really make sense. You are using LESS PHP but you wanna actually remove that functionality. The question makes no sense to me.

answered Mar 03 '15 at 08:57

Jordy

948
2
9
28

What I understand that OP wants is to precompile LESS into CSS, but leaving variables, so instead of compiling it all time he could just `str_replace()` variables before sending CSS to users and saving a lot of time with that. He just doesn't know how to precompile it but leaving variables. – Forien Mar 03 '15 at 09:09
I see, but why would he use less.php for this then? The whole file wouldn't be needed right? @Forien – Jordy Mar 03 '15 at 09:10
It make sense because LESS has many options, but I do not want to simple "LESS to CSS", I want to create from LESS my special **"CSS" with LESS variables** only for admin panel (Setting Form) and thanks to this file I can create fast customization, and after that I can generate final CSS file to front of website. – Cichy Mar 03 '15 at 09:51

score 1 · Answer 2 · answered Mar 03 '15 at 09:02

My answer won't give you what you want, but maybe it will change your mind.

Actually, what you are doing right now is good, but as you said, compiling it all time for every user is bad for everyone. That's why you should implement caching mechanism. Save compiled (final) CSS as file on server, and point users to that file. In your compile script add code that will check if cached file is older than let's say one day (or one hour, but no less). If it's older, then compile new one.

This way, you will only compile one time for a day. Day is for example.

You can also set it to always compile if there is no cached version. This will be helpful if you are changing a lot of stuff, then you can just delete cached CSS and new one will be generated.

If you have some admin panel with something that can change LESS file, then just add another line to executed code that will force recompile or will just delete (unlink()) cached file.

Caching is a bless and it will be good for you, your users and your server

but this Setting Form is only for administrator (Template Options in admin panel). After he clicked "Submit" in Setting Form - _customizer_ will generate and save styles in CSS file (from LESS), but this operation, when administator changing something in Setting Form and less.php start working... it works slow. After administrator finished changes, front of website uses only CSS file, and it works fine (fast). — Cichy, Mar 03 '15 at 09:45

CSS file with LESS variables

2 Answers2