15

如何在 CSS 文件中使用 Razor？

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

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

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

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

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

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

4

1 回答 1

31

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

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" />
于 2012-04-23T13:14:32.193 回答