LESS CSS & Symfony - Updating color schemes dynami

Question

I'm working with the Symfony 1.4 and I'm running into a bit of a problem using the LESS CSS preprocessor.

Let's say that I have 2 Less files with color specific variables. They are called blue.less and red.less.

Here they are:

Blue.less

@mainBorder: blue;
@pulldownBackground: blue;

Red.less

@mainBorder: red;
@pulldownBackground: red;

Now let's say that I have a layout.less file that will look something like this:

// Colored line under Nav
.main {
    border: 1px solid @mainBorder;
    .pullDown { background: @pullDownBackground; }
}

If I want to use one of the color variable files, I need to declare it at the top of the layout.less file like this:

@import 'red.less';

Since the @import statement has to reference a specific file, how would I be able to dynamically pass blue.less to the @import statement whenever I wanted to change the color scheme?

Would there be a way to dynamically declare which of the color specific LESS files will be passed to that import statement with PHP and the Symfony framework?

Or can this problem be solved without server-side code?

Answer 1

I've never used Symphony, but this should get you going in the right direction regardless of framework.

First you want to create your LESS file:

<?php
$color_scheme = "red"; // we're simplifying here for now, but this could be set via $_POST variable

/*
    it would probably be a good idea to check if the file exists first before we import it.
    see function: file_exists()
*/

$contents = "
@import '$color_scheme.less';
@import 'main_styles.less';
@import 'other_stuff.less';
";

file_put_contents("path/to/styles.less");
?>

Now you have a LESS file that is ready to be processed, same as if you written it by hand, but with the color scheme being easily swappable. If I were doing this with bare PHP, I would be using the exec() function to invoke commands that would be available via command line. Here's an example for invoking SASS via exec() (I've never used LESS this way, so you'll have to fill in the blanks here).

<?php
exec("sass --compile path/to/sass:path/to/public/css");
?>

If your Symphony plugin does the compilation for you without the need to use the exec/command line, then you'll probably want to do that instead.