SCSS variablecolor set in Panel


I use SCSS for my Template an now I want to define the primary Site color in the Panel.
How can I use the php with SCSS?
i tried to serve the SCSS as PHP with an different fileheader
<?php header("Content-type: text/x-scss"); ?>
but this doesn’t work.
have anybody an idea how I can use the panel generated color also with SCSS?


Are you compiling your SASS dynamically on the server? Usually, you compile your SASS files to CSS before sending it to production, so I’m wondering where the user generated color would fit into that workflow?

Hello @texnixe,

yes i compile it on the server through sassphp.

Looks like there is a setVariables method?

Just thought I’d contribute a little, by mentioning that this can actually be done client-side, on the browser, using LESS (instead of SASS).

IMHO, LESS is a css pre-processing language that doesn’t get nearly as much love and attention as it deserves. The LESS processor can be loaded as a normal javascript script, in-browser. Although it is not the fastest way to render your .less stylesheets, in smaller sites it’s pretty impossible to notice any difference in speed. And it does allow you to do in-brower variable ‘magic’, like what is wanted here…

@luxlogica They don’t even recommend it in production themselves. Plus, visitors (albeit few) who have JS disabled, will get unstyled content.

@texnixe Yes, they don’t recommend it because they are concerned about performance, and because browsers tend to be a quirky environment anyway. But my experience has been, that it’s actually very stable and usable - specially on smaller sites, and sites that are not overly complex.

If you have an ajax-based multi-page web application that interfaces with a couple of databases and answering thousands of requests per hour, then using LESS in-browser is not a good idea. If you have a simple, flat-file small-business website, and only want to use dynamic styling in a restricted area, then it’s actually quite cool. :wink:


Actually I switched from Less to Sass before two projects.
But I think the setVariables methods is a possible solution. But I have switched this qroblem to a later milestone in the project because its not the important part actually. The reason for that question was that my customer use this website everyyear again for a conference but with different maincolor.