Question

I was wondering if anyone had ever attempted to create a less or sass stylesheet that had parameters that could be extended via code.

For instance:

@primary-color: red
@secondary-color: grey

The less file is set up to use the inputs (think wordpress file with 2-5 color options in the editor) and then the css and classes could all be modified by those limited choices.

I typically see solutions which create inline code throughout the whole page, but it would appear to make more sense to create master less/sass pages that could be modified via a couple inputs that could appear in a small script file in the head of the page.

This type of solution would appear to make a great deal of sense when theming a design.

Answer 1

I had to implement something like you’re describing in a recent project and I ended up using lessphp. Basically, the method I used was:

1. Read a LESS sheet from a file.
2. Prepend some custom LESS to the beginning of the string you have in memory, like variable declarations or whatever.
3. Pass the full LESS string to the lessphp parser, get the CSS.
4. (Optional) Cache the result intelligently to save yourself some processing time in the future.
5. Serve the CSS.

A method like this could easily be used in a WordPress theme to offer customization.

Additionally: One thing that I botched in my implementation that I’d try to avoid in the future is keeping the variable style separate from the rest of the stylesheet. That is, the lessphp-generated file should only contain styles that depend on your dynamic variables and should only live to augment styles that are in an existing static sheet (with defaults as colors/options). This saves processing power and also lets you use less.js to write the majority of your styles, giving you the ability to use #!watch, etc.