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.

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.

• php
• javascript
• mysql
• css
• less

• How are you converting your LESS into CSS? – Andrew Marshall Commented Dec 19, 2011 at 2:05
• Set up client side right now. I'm looking for something like: href="styles.less&var=FFF" – Chords Commented Dec 19, 2011 at 2:15
• 3 Well the notion that there ever were any variables is gone once you've piled it. If you're moving to doing it server-side than it's surely possible, though I'm not immediately sure how. Best thing I can think of is to have PHP generate a LESS stylesheet with those variables and then have that piled with everything else. – Andrew Marshall Commented Dec 19, 2011 at 2:17
• Interesting, thanks, I will toy with that. – Chords Commented Dec 19, 2011 at 2:27

2 Answers 2

The best approach that e 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 remended alternative is piling you LESS files in client-side, you could manually pile 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>

CSS:

#header {
    color:black;
    border:1px solid #dd44dd;
}

#header .navigation {
    font-size:12px;
}

#header .navigation a {
    border-bottom:1px solid green; 
}

#header .logo {
    width:300px;
}

#header .logo:hover {
    text-decoration:none;
}

LESS:

#header {
    color:black;
    border:1px solid #dd44dd;
    .navigation {
        font-size:12px; a {
            border-bottom:1px solid green;
        }
    }
.logo