0

I've been having trouble Automatically Compiling my .scss files into my main WordPress style.css file.

I'm using Leafo's SCSSPHP script and trying to achieve a few things.

  1. i'm using Kirki (http://kirki.org/) to override the WordPress Theme Customizer and this is what i'm trying to do. Create my Panels/ Sections/ Settings in the theme customizer like Font Size/ Google Font Changer/ Background Colour etc... and when the value is changed in the theme customizer its updates the .scss file which will automatically compile to display the user what they have changed. Im trying to avoid inlining my CSS, please don't flame as themes like the X-theme do this and so does the Redux Framework.

  2. How would i go about including the variables from the Theme customizer into the .scss files, if it help im using _S theme with sass included. I'm not sure if i need to create a style.php file at theme root level or make my .scss files into mixins.scss.php?, also where will i have to place it so that it will be enqueued.

In style.php located at the root of the theme:

<?php

header( 'Content-type: text/css' );

require dirname( __FILE__ ) . "/framework/scss/wp-scss/scssphp/scss.inc.php";

$scss = new scssc();
$scss->setImportPaths( "framework/scss/" );
$scss->setFormatter( "scss_formatter_compressed" );

echo $scss->compile( '@import "style.scss"' );

and this is in my style.css file:

@import url("/framework/scss/style.scss");

then i include the style.php/style.scss like this:

wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/style.php/style.scss' );

Which will compile my style.scss and adjust what i need to do using static values, which i'm trying to avoid and update the file using the variables from the theme customizer.

Please let me know if you need more information,

any help is much appreciated

Thanks

Improve this question

2 Answers 2

Reset to default
1

I wanted to achieve the same thing.. What I ended up doing was creating a function that collects the Kirki variables (see here about the use of variables in Kirki) and writes them to a scss..

$file = get_template_directory() . '/sass/custom/_custom_vars_mixins_options.scss';

if(file_exists($file)){

    $output = "";

    $variables = Kirki::get_variables();
    foreach ( $variables as $variable => $vvalue ) {
        $output .= '$' . $variable . ': ' . $vvalue . ';' . PHP_EOL;
        //echo '@' . $variable . ':' . $value . ';';
    }

    file_put_contents($file, $output, FILE_TEXT )or die('<br />Error writing to custom options CSS file');

This function is called each time the user saves their settings in WP Customizer through the sanitization callback, hence writing all the custom user settings to the .scss file.

Improve this answer
1
  • Hey not sure if you'll will answer this, do you reckon that you could provide all of the code that you used to make this happen? Thanks.
    – Henshall
    Commented Jun 2, 2016 at 21:07
0

I'm currently experimenting with adding support for pre-processors in Kirki. You can find instructions on how to use that here: https://github.com/reduxframework/kirki/wiki/variables Please note that the above only works with the github version of the plugin as it's not stable and still under development.

If all you want to do is avoid inline CSS in the <head> then there are other ways to do it... Check out http://aristeides.com/blog/avoid-dynamic-css-in-head/

Improve this answer
5
  • Please See My Updated Question Really appreciate the comment and thanks for your continued development of Kirki, i really really like it. The main thing that i'm not seeming to get is how to put values like a slider value or the colour from a colour selector dynamically into a certain .scss which should automatically compile using the SCSSPHP script and the theme customizer. Ive included hat i have in the question above.
    – Henshall
    Commented Jun 9, 2015 at 21:00
  • This gist should give you an idea of how to do it: gist.github.com/aristath/7b6eb847c9302e289583 I haven't tested it so it could fail, but the principal is solid: A compiler function is hooked in 'customize_save_after'. I'm using the WP_Filesystem class to actually write the CSS to a file in /wp-content/uploads, and then enqueue that file. There's a lot of extra logic there which is the result of previous trials and errors I had with the shoestrap theme but they take care of a lot of issues with weird SSL & domain-mapping situations. You may have to tweak it a bit but it's a start. :)
    – Aristeides
    Commented Jun 10, 2015 at 2:01
  • Once again thank you so much, ill try this tonight and report back here how it goes. I appreciate your help so far.
    – Henshall
    Commented Jun 10, 2015 at 9:10
  • Hi Aristeides, I've tried adding the code into the style.php file but its returning a 500 internal server error and the SCSS file isn't getting compiled, it seems that when you add the compiling part into either a function or class it seems to break. Would i be able to send you the link to my private repo so you could take alook, only if you have time. Again, any help would be much appreciated.
    – Henshall
    Commented Jun 16, 2015 at 9:12
  • Hey there!I'm sorry I've been unable to help further with this one, I just didn't have time to deal with this... The code I posted was just an example. You'll have to tweak it for your own use-case, what I wrote was just an example that I had not tested.
    – Aristeides
    Commented Jun 22, 2015 at 22:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.