I need to delivery dynamic css content. In a short, I need this:
<link href="/css/site.css?color=111111" rel="stylesheet" type="text/css">
where site.css has unprocessed less code.
So I installed Node.js+LESS on server-side, and the follow line works fine:
$ lessc testless.less
But I still didn't figure out how to configure server to answer these HTTP requests.
1) What the best option: Using either apache or node.js? (I already have an apache server installed and working)
2) How should I configure my server and application to achieve this?
Any help would be appreciated.
Thanks Ronan
I solved the same kind of problem to build http://twitterbootstrap3navbars.w3masters.nl/ and http://twitterbootstrap3buttons.w3masters.nl/. For both application i use apache with php.
For the button generator i used Lessphp and for the navbar generator i call lessc via PHP's exec().
I use less code to write inline stylsheets. In your case you would create a dynamic stylesheet.
So for example use:
<link href="/css/site.php?color=111111" rel="stylesheet" type="text/css">
With site.php:
<?
//use lessphp from http://leafo.net/lessphp/
header("Content-type: text/css", true);
$less = new lessc;
echo $less->compile('p {color: '.$_GET['color'].'; }');
exit;
or
<?
//use lessc
header("Content-type: text/css", true);
exec( echo "p { color: '.$_GET['color'].'; }" | /usr/local/bin/lessc -',$output,$error);
echo implode("\n",$output);
exit;
I'll suggest another preprocessor, which is based on JavaScript - http://krasimir.github.io/absurd/. The idea is to use JavaScript objects or JSON and generate CSS. Later, this CSS could be added to the document.
api.add({
body: {
marginTop: "20px",
width: "100%"
},
header: {
width: "100%"
}
});
compiles to:
body {
margin-top: 20px;
}
body, header {
width: 100%;
}
AbsurdJS is available for a server-side (nodejs) or client-side usage. The good thing is that you can use everything which is available in the usual js code.