Manually compile SASS to CSS via C# Action for Customizable Frontend Layouts

Question

I try to build a Webfrontend that is customizable by my users.

My users do not have any webDev skills and internally I work with SCSS files so I got the idea to give them my sass-variables for customization.

(You may have seen something like this before in themeRollers of some reputable CSS-Frameworks.)

So my workflow is something like this:

1. Users get the variables of my SASS to edit
2. they post these Variables to an Controller Action
3. MAGIC: my .SCSS-file becomes a .CSS-file
4. I save the .CSS file to provide it for a later webrequest

I need your help, because I don't know how Step 3 could look like. Maybe you have already implemented this or you have a useful thought.

I'm very grateful for any suggestion

Answer 1

So I found a way to do the magic by using NSass. I have to test if/how it supports @imports but it seems to be the right direction for that problem.

Here's a little Snippet using NSass

string scss = "button.button{background-color: #fff; &:hover{opacity: 0.5;}}"
var compiler = new SassCompiler();
string compiled = compiler.Compile(source: scss, outputStyle: OutputStyle.Compressed, sourceComments: false); //returns "button.button {background-color:#ffffff;}button.button:hover {opacity:0.5;}"