Динамические таблицы стилей с использованием Razor

Я использую Razor View Engine в течение некоторого времени, и мне было любопытно использовать его в таблицах стилей. Я могу использовать Razor в <style> блоках файлов .cshtml, но мне было интересно, могу ли я использовать его во внешних файлах .css (хотел бы иметь .cscss). Итак, я искал ее и нашел две вещи:

Первый LESS: "Динамический язык стилей". Он кажется простым в использовании и мощным со всеми функциями, но мне действительно нужен Razor-С#.

Второй Динамический CSS с использованием Razor Engine - статья CodeProject, которая больше похожа на то, что я хочу, но у нее нет поддержки кэширования или предварительной компиляции ( "no" Я имел в виду, что писатель не упоминал об этих аспектах". Я также хотел бы выделить подсветку синтаксиса в Visual Studio, но это вторично.

Итак, как я могу писать Razor в файлах CSS с минимальными затратами на производительность и желательно с подсветкой синтаксиса?

В качестве примечания:
Я нашел проект под названием RazorJS. Это похоже на версию Javascript, которую я хочу для CSS с поддержкой кеширования. Я упоминаю это только для того, чтобы уточнить мои потребности. Мне не нужно использовать Razor в Javascript в настоящее время, но я думаю, что если я сделаю это с помощью CSS, сделать то же самое с Javascript не будет слишком сложно.

Ответы

Ответ 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>

_{[ note, если вы получите ошибку привязки сборки, вам может потребоваться изменить номер версии в типе расширения в соответствии с вашей версией движка 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" />