Change scss variables with WP Customizer

[AntGS83]

Hi,

I try to change variables (in _bootscore-variables.scss) with the WP Customizer. I found this blog post :
https://awhitepixel.com/compile-scss-with-php-add-variables-to-wordpress-customizer/
But when i try to compile CSS on the go in Customizer preview in functions.php, nothing happens (my "link-color" variable is ok when i use get_theme_mod in my templates without trying to compile it).

`if (is_customize_preview()) {
add_action('wp_head', function() {
$compiler = new ScssPhp\ScssPhp\Compiler();
$source_scss = get_stylesheet_directory() . '/assets/scss/_bootscore-variables.scss';
$scssContents = file_get_contents($source_scss);
$import_path = get_stylesheet_directory() . '/assets/scss';
$compiler->addImportPath($import_path);

	$variables = [
		'$primary' => get_theme_mod('link-color', '#0d6efd'),
	];
	$compiler->setVariables($variables);

	$css = $compiler->compile($scssContents);
	if (!empty($css) && is_string($css)) {
		echo '<style type="text/css">' . $css . '</style>';
	}
});

}`

As boostcore already uses scss.inc.php, i didn't add require_once(get_stylesheet_directory() . '/inc/scssphp/scss.inc.php'); (maybe it's a mistake ?).

To change bootscore variables with the customizer would be a huge improvement in my project. I'd be very grateful if anyone has any ideas...

[crftwrk]

Of course, not. Bootscore has nothing to do with the Customizer. Variables must be added to _bootscore-variables.scss. Everything you need to know about built-in scssphp compiler and which file is used for variables, custom css or utilities can be found here https://bootscore.me/documentation/theme/css-scss-compiler/

[AntGS83]

Thanks a lot for your answer. Actually, the blog post i found explains how to save the customizer values in a scss file (i have $primary in _bootscore-variables.scss and i want to change it with the customizer). It looks powerful because you don't need to change the scss files manually : the customizer could change it with this function (step 4 in the blog post), but i don't understand why it doesn't work.

` add_action('customize_save_after', function() {
$compiler = new ScssPhp\ScssPhp\Compiler();

	$source_scss = get_stylesheet_directory() . '/assets/scss/style.scss';
	$scssContents = file_get_contents($source_scss);
	$import_path = get_stylesheet_directory() . '/assets/scss';
	$compiler->addImportPath($import_path);
	$target_css = get_stylesheet_directory() . '/style.css';
 
	$variables = [
		'$main' => get_theme_mod('theme-main', '#594c74'),
		'$secondary' => get_theme_mod('theme-secondary', '#555'),
		'$text-size' => get_theme_mod('theme-text-size', '12') . 'px',
	];		
	$compiler->setVariables($variables);
 
	$css = $compiler->compile($scssContents);
	if (!empty($css) && is_string($css)) {
		file_put_contents($target_css, $css);
	}
});`

[crftwrk]

This may possible with heavy custom coding but I think not with this small code. scssphp is a well-balanced area here, combining this with the Customizer is against the spirit of the project and goes far beyond the scope.

[AntGS83]

Thanks again for your answer. If it goes far beyond the scope, i close the topic.