3

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!

Improve this question
4
  • it is actually a general web development question, and the answer in all things not wordpress is probably that you don't change anything on production, and don't have ruby or node.js installed just to be able to run gulp. All changes are first need to be tested on test server and than the change pushed to production.
    – Mark Kaplun
    Feb 27, 2017 at 16:26
  • Thanks @MarkKaplun but the changes are made by the end user on a CMS. That's the whole point of the thing. There is no way to test those because the developer will not even be arround to test those
    – Miquel Adell
    Feb 28, 2017 at 7:22
  • I'm having a hard time understanding how from PHP the SCSS file can be updated. You mentioned "My first step was to seed this variables.scss with the customizer variables via an action on customize_save_after.". Could you share a snippet of code of how you're getting that to communicate with the SASS file?
    – Erich
    Mar 11, 2022 at 17:20
  • 1
    Hi @Erich, It's been a long time since I wrote this code and I don't have it with me. At the moment I was exploring writing the file in the filesystem with PHP. I ended using css variables and not bothering with compiling sass developer.mozilla.org/en-US/docs/Web/CSS/…
    – Miquel Adell
    Mar 16, 2022 at 16:46

2 Answers 2

Reset to default
3

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.

Improve this answer
2
  • I'm not sure if I'll go the gulp way or the SCSS way but given that you mention both I'm happily accepting the answer. Thanks!
    – Miquel Adell
    Feb 28, 2017 at 7:25
  • 1
    scssphp moved to github; here's a more current link. leafo.github.io/scssphp
    – cdaddr
    Mar 21, 2018 at 7:37
2

I am unable to comment due to lack of points, but fear this isn't a 'complete' solution.

You could investigate this SCSSPHP library here: http://leafo.net/scssphp/

It could compile SCSS for you, without Gulp.

Improve this answer
2
  • Thanks Doug, @Fayaz did mention PHP SCSS copmiler in his second paragraph and I did not know about that. I'll definitely check that
    – Miquel Adell
    Feb 28, 2017 at 7:24
  • 1
    scssphp moved to github; here's a more current link. leafo.github.io/scssphp
    – cdaddr
    Mar 21, 2018 at 7:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.