Include a string that behaves like prepend.css?

[enricodeleo]

First of all I want to say thank for this great tool. It really saves my life and I find it a must for web designers/developers. I'm writing here just to ask for a hint about what I'm doing at the moment. I'm trying to include a string with the main css of a document. The string is returned by a foreach function that populates a variable. I managed to compile it with csscrush::string and this is actually working but I don't want to include this string into my markup (of course if I print the variable between it works fine) but I wondered if I could include this variable into the main file I call with csscrush_file (so it is compiled in one file). Can you please give me some hint? :)

Thank you so much in advance

[peteboere]

If you just need to send in some variables from a php script you can use the vars option:

$file = csscrush_file( '/css/foo.css', array(
  'vars' => array(
    'color-bg' => '#222',
    'color-fg' => '#aaa',
  )
));

[enricodeleo]

thank you for your fast reply. Yes I did it :) but what I was accomplish was to generate some css from custom fields in wordpress and save it on a file. I ended with: something like this

function stili_area() {

//the file I want to process as template for each area
$css_area = file_get_contents(get_stylesheet_directory() .'/css/area.css');    

//loop that generates the css as a string processing post by post from a custom post type (here is 'area')
$stile_area = new WP_Query('post_type=area&posts_per_page=-1'); 
$colore_base = array();

while ($stile_area->have_posts()) : $stile_area->the_post();

    //assign variables and process this bunch of css as a string
    $colore_base['area-color'] = get_post_meta( get_the_ID(), 'wpcf-area-base-color', true );
    $processed .= csscrush::string( str_replace('magic', get_the_slug(), $css_area),array(
        'debug'         => true, // false in production
        'cache'         => false, // true in production
        'versioning'    => false,
        'vars'          => $colore_base
    ));

endwhile;

return $processed;

}

//generate on area saving function save_area_styles($post_id) {

//open file silencing php errors, truncate the content 
$f = @fopen(get_stylesheet_directory() .'/css/area-compiled.css', "w");

//write the result of the function
fwrite($f,stili_area());

//close file
fclose($f);

}

//execute when publish or saving a post add_action( 'save_post', 'save_area_styles'); add_action( 'publish_post', 'save_area_styles');

the css I use as template is:

@in .area-magic {

.wrap-slider {
    background-color: $(area-color);
}

.area-attivita-figlie {
    border: 1px solid $(area-color);
}

.area-attivita-figlie .nav-tabs {
    background-color: a-adjust(s-adjust( $(area-color) 80) -80);
}

.area-attivita-figlie .nav-tabs li a {
    border: none;
    border-top: 10px solid transparent;
    border-right: 1px solid $(area-color);
}

.area-attivita-figlie .nav-tabs li.active a,
.area-attivita-figlie .nav-tabs li a:hover{
    border-top: 10px solid s-adjust($(area-color) -30);
}

.area-attivita-figlie .tab-content {
    background-color: $(area-color);
}

.area-attivita-figlie .titolo-centrato h3 {
    background-color: $(area-color);
}

}

the final css after those functions' execution:

/*

• CSS Crush(ed) on 2013-04-17 14:54:11 +0000
• http://github.com/peteboere/css-crush (v1.9.1) */ .area-hotels .area-attivita-figlie { border: 1px solid #000; border-top: none; }

.area-hotels .area-attivita-figlie .nav-tabs { background-color: rgba(0,0,0,.2); }

.area-hotels .area-attivita-figlie .nav-tabs li a { border: none; border-top: 10px solid transparent; border-right: 1px solid #000; }

.area-hotels .area-attivita-figlie .nav-tabs li.active a, .area-hotels .area-attivita-figlie .nav-tabs li a:hover { border-top: 10px solid #000; }

.area-hotels .area-attivita-figlie .tab-content { background-color: #000; }

.area-hotels .area-attivita-figlie .titolo-centrato h3 { background-color: #000; }

.area-ristorazione .area-attivita-figlie { border: 1px solid purple; border-top: none; }

.area-ristorazione .area-attivita-figlie .nav-tabs { background-color: rgba(128,0,128,.2); }

.area-ristorazione .area-attivita-figlie .nav-tabs li a { border: none; border-top: 10px solid transparent; border-right: 1px solid purple; }

.area-ristorazione .area-attivita-figlie .nav-tabs li.active a, .area-ristorazione .area-attivita-figlie .nav-tabs li a:hover { border-top: 10px solid #6d136d; }

.area-ristorazione .area-attivita-figlie .tab-content { background-color: purple; }

.area-ristorazione .area-attivita-figlie .titolo-centrato h3 { background-color: purple; }

.area-mercati .area-attivita-figlie { border: 1px solid #C40A0B; border-top: none; }

.area-mercati .area-attivita-figlie .nav-tabs { background-color: rgba(206,0,1,.2); }

.area-mercati .area-attivita-figlie .nav-tabs li a { border: none; border-top: 10px solid transparent; border-right: 1px solid #C40A0B; }

.area-mercati .area-attivita-figlie .nav-tabs li.active a, .area-mercati .area-attivita-figlie .nav-tabs li a:hover { border-top: 10px solid #a5292a; }

.area-mercati .area-attivita-figlie .tab-content { background-color: #C40A0B; }

.area-mercati .area-attivita-figlie .titolo-centrato h3 { background-color: #C40A0B; }

then I enqueue the style area-compiled ant that's how I obtained a file with the same css rules @in a specific area with its own custom variable for the style...

[peteboere]

Cool, glad you got it working