How to handle theme customization and sass variables

by

TL;DR: would you run gulp on a production server everytime an admin saves the theme customization settings?

Hi,

I’ve been using gulp+sass+WordPress for some time and now I am developing a theme in which the end user will be able to change the colors via the customizer.

I’m used at having a variables.scss with all my colors and stuff.

My first step was to seed this variables.scss with the customizer variables via an action on customize_save_after.

Of course that works as in I have all the colors I chose on the customizer written into my variables.scss and when I run gulp on my development machine it gets the corret values and everything is great…

Except I did not think about the production machine.

I was not planning on having gulp installed on my production machine so, with my current workflow I don’t see a way to keep using sass variables for colors and fonts.

I know I can solve it getting all the afectd styles out of sass and into a regular .css file that would be apendend after the regular compiled main.css but it seems like a major step back.

I do use a lot of the sass functions (darken, lighten, transparentize…) to play with the base colors so it’s not just move everything to a non-compiled stylesheet.

If this was a general programming question I would be posting that on software enginerring stack exchange, not on regular stack overflow but I guess even if it is not a code problem, beeing so WordPress centric it fits better here than on softwareengineering.

Thanks!

2 Answers
2

Yes, I would. gulp is very light weight and I don’t see any problem to keep it running in the production server and watching my scss files in the background.

However, if for some reason the production server is out of your control or you don’t want to install extra software, you can of course use a PHP scss compiler and attach it to your theme’s functions.php file to recompile the scss file to css for the customizer changes.

You can use the customize_save_after hook to watch for the customizer changes and then execute the scss compiler. That way every time someone makes a change to the customizer, you’ll be able to recompile the scss file to reflect the changes in your css file.

Leave a Comment