Dynamic Stylesheets Using Razor

Question

Jak używać maszynki Razor w plikach CSS?

Używam od pewnego czasu Razor View Engine i byłem ciekawy, jak używać go w arkuszach stylów. Mogę użyć Razor w <style> bloków .cshtml plikami, ale zastanawiałem się, czy mogę go używać w zewnętrznych .css plików również (chciałoby mieć formatowanie .cscss). Więc googotowałem i znalazłem dwie rzeczy:

Pierwsza to LESS: "Dynamiczny język arkusza stylów". Wygląda na to, że jest łatwy w użyciu i ma wiele funkcji, ale naprawdę potrzebuję Razor-C#.

Drugi to Dynamic CSS Using Razor Engine, artykuł CodeProject, który bardziej przypomina to, co chcę, ale nie ma buforowania ani wstępnej kompilacji (przez "brak wsparcia" rozumiem, że autor nie wspomniał o tych aspektach). Chciałbym również mieć podświetlanie składni w Visual Studio, ale jest to wtórne.

Jak więc napisać maszynę Razor w plikach CSS przy minimalnych kosztach wydajności i najlepiej z podświetlaniem składni?

• Czy istnieje do tego projekt "bardziej kompletny"?
• Czy mogę poprawić powyższy projekt, aby osiągnąć buforowanie/kompilowanie? Jeśli tak to jak?

Na marginesie:
znalazłem projekt o nazwie RazorJS. To jest jak wersja JavaScript tego samego, co chcę dla CSS z jego obsługą buforowania. Wspominam o tym tylko po to, by wyjaśnić moje potrzeby. Nie muszę teraz używać Razora w JavaScript, ale domyślam się, że jeśli zrobię to z CSS, to samo z JavaScriptem nie byłoby zbyt trudne.

Answer 1

Można utworzyć niestandardowy silnik wyświetlania:

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

a także zarejestrować go z rozszerzeniem niestandardowych w Application_Start:

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

i wewnątrz web.config skojarzyć rozszerzenie z dostawcą kompilacji:

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

_{[uwaga, jeśli pojawi się błąd powiązania zespołu, może być konieczna zmiana numeru wersji w typie rozszerzenia, aby pasowała do wersji silnika Razor. Możesz sprawdzić, której wersji używasz, patrząc na właściwości twojego odniesienia do System.Web.WebPages.Maszynka do golenia w projekcie]}

I ostatni krok jest mieć jakiś Kontroler:

public class StylesController : Controller 
{ 
    public ActionResult Foo() 
    { 
     var model = new MyViewModel 
     { 
      Date = DateTime.Now 
     }; 
     return View(model); 
    } 
} 

i odpowiedni widok: (~/Views/Styles/Foo.cscss):

@model AppName.Models.MyViewModel 

/** This file was generated on @Model.Date **/ 

body { 
    background-color: Red; 
} 

które mogą teraz zostać włączone jako styl w układzie:

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