This function will convert a PHP array of nested CSS selectors into a CSS string. Nesting comes in handy with SASS rules or nesting standard CSS within media queries.
<?php
/**
* Converts a multidimensional array of CSS rules into a CSS string.
*
* @param array $rules
* An array of CSS rules in the form of:
* array('selector'=>array('property' => 'value')). Also supports selector
* nesting, e.g.,
* array('selector' => array('selector'=>array('property' => 'value'))).
*
* @return string
* A CSS string of rules. This is not wrapped in <style> tags.
*/
function grasmash_generate_css_properties($rules, $indent = 0) {
$css = '';
$prefix = str_repeat(' ', $indent);
foreach ($rules as $key => $value) {
if (is_array($value)) {
$selector = $key;
$properties = $value;
$css .= $prefix . "$selector {\n";
$css .= $prefix .grasmash_generate_css_properties($properties, $indent + 1);
$css .= $prefix . "}\n";
}
else {
$property = $key;
$css .= $prefix . "$property: $value;\n";
}
}
return $css;
}
?>
Example usage:
<?php
$nested_css_rules = array(
'@media (min-width: 44em)' => array(
'.special-class' => array(
'width' => '50px',
'color' => 'red',
),
),
);
print "<style type='text/css'> \n" . grasmash_generate_css_properties($nested_css_rules) . "</style>\n";
$flat_css_rules = array(
'.special-class' => array(
'width' => '50px',
'color' => 'red',
),
);
print "<style type='text/css'> \n" . grasmash_generate_css_properties($flat_css_rules) . "</style>\n";
?>
These examples will output:
<style type='text/css'>
@media (min-width: 44em) {
.special-class {
width: 50px;
color: red;
}
}
</style>
<style type='text/css'>
.special-class {
width: 50px;
color: red;
}
Add new comment