動態樣式表使用Razor

Question

如何在CSS文件中使用Razor？

我正在使用Razor View Engine一段時間，我很好奇在樣式表上使用它。 我可以在.cshtml文件的<style>塊中使用Razor，但我想知道我是否也可以在外部.css文件中使用它（希望有.cscss格式）。 所以我用Google搜索並發現了兩件事：

第一個是LESS ：“動態樣式表語言”。 它似乎易於使用且功能強大，具有所有功能，但我需要Razor-C＃，真的。

第二個是動態CSS使用Razor引擎 ，一個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" />