Grav + scss (less)

I read doc and found post grav + scss about using scss in theme. There is explanation i can compile manually scss to css, but this i can do myselft anytime.

My question is, how to grav-way, use scss (or less) to provide my theme with variables like heading color, footer background color and such. I need to create theme variables, which i will put into scss (less) and force Grav to automatically generate new css linked in theme. Is it possible to fully automate this process?

Thanks for help, tips or maybe pointing me to some howto / plugin.

Compiling .scss into css is part of the normal work-flow in Grav. My experience in the last couple of years has been with sass so I've forgotten the nuances of working with less, but they only differ in their particulars. BTW, I am using Windows 10 and these directions are for localhost.

My method for taking advantage of sass in a Grav theme is to use the watch method with the github terminal (outlined below). If you don't use a CLI there is a cross-platform tool called Prepros that will handle the preprocessing of scss (as well as many others). I highly recommend Prepros -- having used it for a couple of years.

In any case, there should be a file named _custom.scss located in \user hemes\YOURtheme\scss emplate. _custon.scss is where you would enter all of your sass declarations.

The big trick is to automatically process the scss into css. Both the cli and Prepros can do this for you.

Using sass in beyond the scope of this message.

I assume your theme has: \user hemes\YOURtheme\css-compiled emplate.css. If not, you have a few more hoops to jump through. Use Antimatter as a guide.

Open (or cd into) your terminal in the root folder of your theme. Then type (or paste) the following into the terminal:

scss --load-path ../antimatter/scss --watch scss:css-compiled

Hit Enter.

Now, every time you make a save to _custom.scss your scss will be converted and written to template.css

Note that you'll have to open the cli and enter the "watch" command every time you start up your localhost server.

Many thanks for such complete answer. I'm new to scss/sass and i feel it's the best method how to provide my themes with many variables easy to operate by end-user setup.

But i still need to solve one thing: how to get variables from theme to admin panel and then back to template (as you mention, something like xxx_custom.scss). I think i saw some theme witch variables, i will search and study it, hope it will be some blueprint again.

Second, i hoped, there is some function/hook called everytime i save custom theme and it will autocall css generator. I don't find the watch-way good, because i still take care about something and second if i share my theme, other users may not be able to run such tasks on their server.

Antimatter is good example how to do it. I will copy it, thanks for pointing me. But the problem with autogenerate stays.