通过自定义前端布局的C#操作手动将SASS编译为CSS

本文关键字：SASS 编译 CSS 操作手 自定义 前端 布局 | 更新日期: 2023-09-27 18:21:14

我试图构建一个可由用户自定义的Webfrontend。

我的用户没有任何webDev技能，我在内部处理SCSS文件所以我想给他们我的sass变量来定制。

（你可能以前在一些著名的CSS框架的集合中看到过这样的东西。）

所以我的工作流程是这样的：

  1. 用户获取我的SASS的变量进行编辑
  2. 他们将这些变量发布到控制器操作
  3. MAGIC：我的.SCSS文件变成了.CSS文件
  4. 我保存了.CSS文件，以便为以后的网络请求提供它

我需要你的帮助，因为我不知道第三步会是什么样子。也许你已经实现了这一点，或者你有一个有用的想法。

我非常感谢您的任何建议

通过自定义前端布局的C#操作手动将SASS编译为CSS

所以我找到了一种使用NSass实现魔术的方法。我必须测试它是否/如何支持@imports，但这似乎是解决这个问题的正确方向。

这里有一个使用NSass 的小Snippet

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;}"

您可以在visual studio中设置一个名为web开发工具的插件。每次更新less或sass文件时，vs都会为您生成文件。

免费

http://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361

而且，如果你想动态地做到这一点。你可以为你的项目添加这个nuget包：

https://bundletransformer.codeplex.com/

相关文章：