SCSS to minified CSS with liquid templating

[tomtrigenex]

Hi, Im hoping someone can point me in the right direction.
I'm trying to convert SCSS into minified CSS. Normally I'd use an online tool or similar however it contains a lot of liquid templating that id like to be respected.

Do you know of any tool (cssnano ?) or other that might help please ?

Many thanks for your time !
Regards,
Tom

example
.site-footer { {% if section.settings.bg_footer_color != '' %} background: {{ section.settings.bg_footer_color }}; {% endif %} . . @media (max-width: 767px) { .footer-top .col-footer { border-bottom: 1px solid {{ section.settings.bg_footer_color }}; } } }

[alexander-akait]

You should compile SCSS to CSS

[tomtrigenex]

Thanks for the reply but thats what Im trying to do, but tools fail because of the liquid templating, hence the question.

[ludofischer]

The liquid templating causes the SCSS to become invalid, so I think a lot of tools are going to fail to process it. You would need to first process liquid and turn it into normal SCSS. But if you need to interpolate the variables at runtime it won't be possible. The other solution would be to put liquid out of SCSS and use it in HTML instead to add a class to the HTML elements.

[tomtrigenex]

Thanks I'll look into that ;)
I think a tooling fix of some kind is going to be very important to Shopify devs.
They are dropping scss support for just css so many devs are going to be looking for an easy way to go from scss to css with liquid.