CSS Preprocessor

[coastalrugs]

Use a preprocessor like that from (http://leafo.net/lessphp/ based on: http://lesscss.org/) to generate the squirrelcart CSS.

Hopefully this will take some of the tedium out of making systemic changes to colors and such.

The method would involve another layer of abstraction, but one that might better convey the 'idea' of the styles, burying some of the ultility of CSS. For instance, being able to list 'config-type' variables (i.e. theme-colors and font sizes) at the head of the 'CSS' file to let SC users easily manipulate them -vs- having those styles buried throughout the current css syntax; one change -vs- multiple changes.


I plan to tinker with this on my end to see about this idea's feasibility. I make this request to provide a point for feedback and discussion. Hopefully integration will be simple enough that it can all be done within the template folder (for now, until the idea is integrated into SC proper ).

[Jamie]

Thanks for the request. This looks very promising. My only concern with implementing something like this is that someone not familiar with LESS may have a little trouble getting started with our stylesheets, especially if we do nesting like they have in some of the examples on those pages. It looks pretty simple to me, however.

What would be even better is if this type of thing actually made it into the CSS3 spec.

It looks like Webkit has support for variables now, but I don't think it is an official part of CSS3.

This type of thing (at least the variable and math part) could easily be done with PHP alone, though doing it that way would cause one parse error to break your entire stylesheet. We have PHP in all our stylesheets now to output image URLs, and to add some IE 7 and IE 6 specific CSS to fix rendering bugs in those browsers.

<?php
$color_main = '#c2041b';
$color_accent = '#9904c2';
?>
#header {
     color: <?php print $color_main ?>;
}
h2 {
     color: <?php print $color_main ?>;
}
a:hover {
     color: <?php print $color_accent ?>;
}

I'll look into this further as time permits. If anyone else wants to vote for this (LESS implementation for stylesheets via PHP) please chime in.

I'll make this a sticky, as it is something we could definitely benefit from.

[coastalrugs]

I have this working on my local MAMP installation.

Since the CSS could have php and also allow for Less coding, the current flow is to load the css into a buffer (taking care of the php parsing) then running that buffer output through Less (taking care of any possible code condensation)

Pseudo-code:

start_buffer
    "Normal CSS markup with <?php code ?> and all"
var = buffer;
clear_buffer
print less(var);

For my CSS this meant basically just book-ending the current style_main.css.php file contents with an ob_start/ob_end_clean. The parsed buffer contents are then run through the less routine. php > less > output.

It is noted that Less can handle perfectly valid CSS just fine, so in reality, no changes need to be made to the current or future css to get the benefits of Less - it will remove whitespace and comments and only tweak things that it finds to do (the function bits and such). So users could continue without ever needing or caring that Less is available in the background.

I have attached a sample file to show how it is actually coded on my end (it is from a custom theme folder, total css trimmed-down for clarity).

[Jamie]

Looks good. I'm working on some new features to be announced shortly, which may benefit from this. I'm playing around with it now to see how it will work.

Recommendation... you can change this:

<?php
ob_start();
// output
$buffer_raw = ob_get_contents();
ob_end_clean();
?>

to this:

<?php
ob_start();
// output
$buffer_raw = ob_get_clean();
?>

ob_get_clean() requires PHP 4.3.0 or higher. On the off chance that you have an older version, we have a built in function that simulates it in older versions.