使用 Razor 的动态样式表

Question

如何在 CSS 文件中使用 Razor？

我使用Razor View Engine 有一段时间了，我对在样式表上使用它感到好奇。我可以在<style> .cshtml 文件块中使用 Razor，但我想知道我是否也可以在外部 .css 文件中使用它（希望有一个 >.cscss 格式）。于是我google了一下，发现了两件事：

第一个是LESS：“动态样式表语言”。它似乎易于使用且功能强大，但我需要 Razor-C#，真的。

第二个是Dynamic CSS Using Razor Engine，一篇 CodeProject 文章，它更像我想要的，但它没有缓存或预编译支持（我所说的“不支持”是指作者没有提到这些方面）。我也想在 Visual Studio 中突出显示一些语法，但这是次要的。

那么，如何在 CSS 文件中以最低的性能成本编写 Razor，最好使用语法高亮显示？

• 有没有“更完整”的项目？
• 能否改进上述项目以实现缓存/编译？如果是这样，怎么做？

附注：
我找到了一个名为RazorJS 的项目。这就像我想要的具有缓存支持的 CSS 的 Javascript 版本。我提到这一点只是为了澄清我的需求。我目前不需要在 Javascript 中使用 Razor，但我想如果我用 CSS 完成它，用 Javascript 做同样的事情不会太难。

Answer 1

您可以创建自定义视图引擎：

public class CSSViewEngine : RazorViewEngine
{
    public CSSViewEngine()
    {
        ViewLocationFormats = new[] 
        { 
            "~/Views/{1}/{0}.cscss", 
            "~/Views/Shared/{0}.cscss" 
        };
        FileExtensions = new[] { "cscss" };
    }

    protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
    {
        controllerContext.HttpContext.Response.ContentType = "text/css";
        return base.CreateView(controllerContext, viewPath, masterPath);
    }
}

并在 Application_Start 中使用自定义扩展注册它：

ViewEngines.Engines.Add(new CSSViewEngine());
RazorCodeLanguage.Languages.Add("cscss", new CSharpRazorCodeLanguage());
WebPageHttpHandler.RegisterExtension("cscss");

在 web.config 中，将扩展与构建提供程序相关联：

<compilation debug="true" targetFramework="4.0">
    <assemblies>
        ...
    </assemblies>

    <buildProviders>
        <add extension=".cscss" type="System.Web.WebPages.Razor.RazorBuildProvider, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </buildProviders>
</compilation>

_{[注意，如果您遇到程序集绑定错误，您可能需要更改扩展类型中的版本号以匹配您的 Razor 引擎版本。您可以通过查看项目中对 System.Web.WebPages.Razor 程序集的引用的属性来检查您使用的版本]}

最后一步是拥有一些控制器：

public class StylesController : Controller
{
    public ActionResult Foo()
    {
        var model = new MyViewModel
        {
            Date = DateTime.Now
        };
        return View(model);
    }
}

以及对应的视图：(~/Views/Styles/Foo.cscss)：

@model AppName.Models.MyViewModel

/** This file was generated on @Model.Date **/

body {
    background-color: Red;
}

现在可以作为样式包含在布局中：

<link href="@Url.Action("Foo", "Styles")" rel="stylesheet" type="text/css" />