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.
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.
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:
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