Compiling SASS with WP Customizer variables

sage
1

Hello there,

(I am using Sage 9)

I would like some advice on the best possible way to approach my problem if anybody has some.

The setup:

  • I have my Wordpress Customizer setup with custom settings and controls. (brand colors etc)
  • I have my SCSS stylesheets, with my variables setup in the respective SCSS file as of now.

The concept :
I need the SCSS style to be compiled with my WP Customizer variables every time they are changed in the back-end of WP.

I know that I can hard code some style tags inside of the pages (inline style) and grab the variables with some php but what I need is to have a separation of concerns, meaning I do not want to put any style inside the pages themselves.

Here’s what I tried as of now :

Attempt 1 :
I simply followed the WP Customizer tutorial, but they inject the style via JS directly into the markup, which as I said do not want to do.

Attempt 2 :
I installed the WP-SCSS plugin from the WP backend. This plugin can read the variables from the WP Customizer and add them to the SCSS before compiling it to CSS.
However I ran into a problem because the plugin asks for a path for the source files and a path for the destination css and I cannot get these to work…

Configure Paths
Add the paths to your directories below. Paths should start with the root of your theme. example: "/library/scss/"
Scss Locat ion :
/ressources/assets/styles/
CSS Location :
/dist/styles/

It might very well be a problem to do with the way the assets are served but I have little knowledge in routing, I tried to look around the source and the docs and the only thing I could find is how to enqueue new assets which might come in handy later but as of now I need to understand why I can’t get the plugin to work.

I have no idea how to achieve what I want to do, I’ve been searching around for hours and it seems that this way never answered before but I might be wrong, could be using the wrong search terms…
Anyways this is what I came up with, and there might be an easier and less dependable way of doing this so any input would be greatly appreciated.

1 Like
2

if anyone ever has the same issue as me :

I started out with libsass in PHP, and got it work but it took 50 seconds to compile my SASS and that’s nott up to my standards.
I run my instance of WP on docker so I made a custom docker image with node-sass installed and I created a plugin with very easy code (might not be best practice / synthax etc but it works)
Here is almost all of the code from the plugin, the only important part :
`

<?php header("Content-type: text/css; charset: UTF-8"); ... system("echo '$variables' @import \'$path\' | node-sass --output-style compressed"); ` And I simply require my .php file as a stylesheet and since the correct Content type is set it works.
3

Also consider using WP-SCSS plugin, which gives you hooks to define SCSS variables in your PHP.