使用 Razor 的动态样式表 [英] Dynamic Stylesheets Using Razor

问题描述

如何在 CSS 文件中使用 Razor?

How can I use Razor in CSS files?

我使用 Razor View Engine 有一段时间了，我很好奇在风格上使用它床单.我可以在 <style> 块 .cshtml 文件中使用 Razor，但我想知道我是否也可以在外部 .css 文件中使用它(想要一个 .cscss 格式).所以我用谷歌搜索了一下，发现了两件事:

I'm using Razor View Engine for some time and I was curious about using it on style sheets. I can use Razor in <style> blocks of .cshtml files but I was wondering if I can use it in external .css files also (would like to have a .cscss format). So I googled it and found two things:

第一个是LESS:动态样式表语言".它的所有功能似乎都易于使用且功能强大，但我真的需要 Razor-C#.

The first one is LESS: "The dynamic stylesheet language". It seems easy-to-use and powerful with all the features but I need Razor-C#, really.

第二个是使用 Razor 引擎的动态 CSS，一篇 CodeProject 文章，它更像我想要的，但它没有缓存或预编译支持(不支持"是指作者没有提到这些方面).我还想在 Visual Studio 中突出显示一些语法，但这是次要的.

The second is Dynamic CSS Using Razor Engine, a CodeProject article which is more like what I want but it has no caching or pre-compiling support (by "no support" I meant the writer didn't mention these aspects). I also would like to have some syntax highlighting in Visual Studio but this is secondary.

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

So, how can I write Razor in CSS files with minimum performance cost and preferably with syntax highlighting?

• 是否有一个更完整"的项目?
• 我可以改进上述项目以实现缓存/编译吗?如果是这样，如何?

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

As a side note:
I found a project called RazorJS. It's like the Javascript version of the same thing I want for CSS with its caching support. I'm mentioning this just to clarify my needs. I don't need to use Razor in Javascript currently but I guess if I make it out with CSS, doing the same thing with Javascript wouldn't be too hard.

推荐答案

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

You could create a custom view engine:

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 中使用自定义扩展注册它:

and also register it with a custom extension in Application_Start:

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

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

and inside web.config associate the extension with a build provider:

<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 程序集的引用的属性来检查您使用的是哪个版本]}

_{[note, if you get an assembly binding error you might need to change the version number in the extension type to match your version of the Razor engine. You can check which version you are using by looking at the properties of your reference to the System.Web.WebPages.Razor assembly in your project]}

最后一步是要有一些控制器:

And the last step is to have some controller:

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

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

which could now be included as a style in the Layout:

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

这篇关于使用 Razor 的动态样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！