动态样式表使用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" />