Passing Variables to a LESS.js Stylesheet

Question

I have several variables (hex colors) defined in a database. I need to pass these variables from MySQL to a LESS.js stylesheet via PHP. Possible?

If not, any advice on a way to do something similar? The lighten and darken variables are key.

Answer 1

The best approach that come in my mind is to dynamic generate a LESS file using PHP (including your vars).

1\ You will need to include a new style sheet in your HTML pages.

<link rel='stylesheet/less' href='css/style.php' />

2\ In your style.php include your PHP vars as follows:

<?php header("Content-type: text/css; charset: UTF-8"); ?>

@brand_color_1 = <?php echo $brand_color_1; ?>;
/* Add all other vars do you need. */

3\ Then at the bottom (or after you LESS var declaration) of this style.php add all your needed imports as follows:

<?php
  header("Content-type: text/css; charset: UTF-8");

  @brand_color_1 = <?php echo $brand_color_1; ?>;
  /* Add all other vars do you need. */

  @import "style.less";
?>

This will works like a clock.

There is an article you can read about CSS Variables with PHP written by Chris Coyier.

---

Another not recommended alternative is compiling you LESS files in client-side, you could manually compile them and pass PHP vars doing the following:

<script type="text/javascript">
var colors = '';
colors += '@brand_color_1: <?php echo $brand_color_1 ?>;'
colors += '@brand_color_2: <?php echo $brand_color_2 ?>;'
colors += '@import "style.less"';
// Add other imports.
var parser = new (less.Parser)();
parser.parse(colors, function(err, tree) { 
  var css = tree.toCSS();
  // Add it to the DOM maybe via jQuery
});
</script>