Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 985
CelsiusF Avatar asked Sep 09 '14 09:09

CelsiusF


People also ask

Can we write Sass in CSS?

Speaking of saving time, Sass reduces the repetition of writing CSS code. This is thanks to its features like functions, variables, inheritance, and so on. Finally, Sass is compiled to CSS and adds all the necessary vendor prefixes so you don't have to worry about writing them manually.


1 Answers

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;}"
like image 172
CelsiusF Avatar answered Sep 28 '22 07:09

CelsiusF