The sanitize_callback method is not a place where the compile process should be happening, this is for sanitizing a control’s setting value being passed.
Initially to accomplish this in BoldGrid Theme Framework, we used the leafo/scssphp library as well, but the lack of live previewing changes, and long wait times for simple changes like changing colors in a color picker, made for a poor user experience in testing. We implemented sass.js shortly after so the scss results could be compiled in JS as users made changes. We also save the compiled result as a theme_mod, and read that if the user is in a customizer preview or viewing a changeset. On the customize_save_after hook we compile and write out the contents using leafo scssphp compiler still, so that the final result is a CSS file with the compiled results that is loaded for the frontend site.
Overall this produced the best results with a minimal amount of work to implement.
Other options that worked were:
- For each setting you provide the user access to, manually write some JS so the preview is updated to look as it should by modifying whatever properties need to be modified for each control.
- Compile using the same method, and trigger an AJAX call when settings are changed and update the CSS inline.
- Trigger a full refresh, and track changes for the temporary states with the changeset UUIDs as part of the filename and load corresponding CSS files as needed.