Verwenden Sie SCSSPHP, um Theme Customizer-Werte in .SCSS-Dateien zu kompilieren, die für die Kompilierung nach CSS bereit sind

Ich habe Probleme beim automatischen Kompilieren meiner .scss-Dateien in meine WordPress style.css-Hauptdatei.

Ich benutze Leafo’s SCSSPHP Skript und versuche ein paar Dinge zu erreichen.

  1. Ich verwende Kirki ( http://kirki.org/ ), um den WordPress Theme Customizer zu überschreiben, und das ist, was ich versuche zu tun. Erstellen Sie meine Panels / Sektionen / Einstellungen im Theme Customizer wie Font Size / Google Font Changer / Hintergrundfarbe etc … und wenn der Wert im Theme Customizer geändert wird, aktualisiert er die .scss Datei, die automatisch kompiliert wird, um den User was anzuzeigen sie haben sich verändert. Ich versuche zu vermeiden, meine CSS inline zu setzen, bitte nicht Flamme wie Themen wie das X-Thema dies tun und so tut das Redux-Framework.

  2. Wie würde ich die Variablen aus dem Theme-Customizer in die .scss-Dateien einfügen, wenn es hilft, _S-Theme mit Sass zu verwenden. Ich bin mir nicht sicher, ob ich eine style.php-Datei auf der Theme-Stammebene erstellen oder meine .scss-Dateien in mixins.scss.php machen muss. Auch wo muss ich sie platzieren, damit sie in die Warteschlange eingereiht wird.

In style.php befindet sich an der Wurzel des Themas:

setImportPaths( "framework/scss/" ); $scss->setFormatter( "scss_formatter_compressed" ); echo $scss->compile( '@import "style.scss"' ); 

und das ist in meiner style.css Datei:

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

dann schließe ich die style.php / style.scss wie folgt ein:

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

Das wird meine style.scss kompilieren und anpassen, was ich tun muss, indem ich statische Werte verwende, die ich zu vermeiden versuche, und die Datei mit den Variablen aus dem Design-Customizer aktualisieren.

Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen,

jede Hilfe wird sehr geschätzt

Vielen Dank

Solutions Collecting From Web of "Verwenden Sie SCSSPHP, um Theme Customizer-Werte in .SCSS-Dateien zu kompilieren, die für die Kompilierung nach CSS bereit sind"

Ich wollte das Gleiche erreichen. Was ich getan habe, war eine function zu erstellen, die die Kirki-Variablen sammelt (siehe hier über die Verwendung von Variablen in Kirki) und sie in eine scss schreibt.

 $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('
Error writing to custom options CSS file');

Diese function wird jedes Mal aufgerufen, wenn der Benutzer seine Einstellungen in WP Customizer über den Bereinigungs-Callback speichert und somit alle benutzerdefinierten Benutzereinstellungen in die .scss-Datei schreibt.

Ich experimentiere gerade mit der Unterstützung von Preprozessoren in Kirki. Hier finden Sie eine Anleitung, wie Sie das verwenden können: https://github.com/reduxframework/kirki/wiki/variables Bitte beachten Sie, dass das obige nur mit der Github-Version des Plugins funktioniert, da es nicht stabil ist und sich noch in der Entwicklung befindet.

Wenn Sie nur Inline-CSS in vermeiden möchten, gibt es andere Möglichkeiten … http://aristeides.com/blog/avoid-dynamic-css-in-head/