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

问题描述

如何在CSS文件中使用Razor？

How can I use Razor in CSS files?

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

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.

第二个是动态CSS使用Razor Engine ，一个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 。它就像JavaScript版本的同一件事情我想要的CSS与其缓存支持。我提到这只是为了澄清我的需要。我现在不需要在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);
    }
}

c $ c> 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 ）：

and a corresponding view: (~/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屋！