Hojas de estilo dinámicas usando Razor

Question

¿Cómo puedo usar Razor en archivos CSS?

Estoy usando Razor View Engine durante algún tiempo y tenía curiosidad por usarlo en las hojas de estilo. Puedo utilizar la maquinilla de afeitar en <style> bloques de .cshtml archivos, pero me preguntaba si puedo usarlo en exteriores Css archivos también (me gustaría tener un formato .cscss). Así que busqué en Google y encontré dos cosas:

La primera es LESS: "El lenguaje dinámico de hojas de estilo". Parece fácil de usar y potente con todas las características, pero realmente necesito Razor-C#.

El segundo es Dynamic CSS Using Razor Engine, un artículo de CodeProject que es más parecido a lo que quiero pero no tiene soporte de caché o precompilación (por "no apoyo" me refiero a que el escritor no mencionó estos aspectos). También me gustaría tener algunos resaltados de sintaxis en Visual Studio, pero esto es secundario.

Entonces, ¿cómo puedo escribir Razor en archivos CSS con un costo mínimo de rendimiento y preferiblemente con resaltado de sintaxis?

• ¿Existe un proyecto "más completo" para eso?
• ¿Puedo mejorar el proyecto anterior para lograr el almacenamiento en caché/compilación? ¿Si es así, cómo?

Como nota al margen:
me encontré con un proyecto llamado RazorJS. Es como la versión de Javascript de lo mismo que quiero para CSS con su soporte de almacenamiento en caché. Lo menciono solo para aclarar mis necesidades. No necesito usar Razor en Javascript actualmente pero supongo que si lo hago con CSS, hacer lo mismo con Javascript no sería demasiado difícil.

Answer 1

Se puede crear un motor de vista personalizada:

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

y registrarlo con una extensión personalizada en Application_Start:

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

y web.config dentro de asociar la extensión con un proveedor de generación:

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

_{[nota, si obtiene un error de encuadernación ensamblado, es posible que necesite cambiar el número de versión en el tipo de extensión para que coincida con su versión del motor Razor. Puede verificar qué versión está usando al mirar las propiedades de su referencia a System.Web.WebPages.ensamblado de la maquinilla en su proyecto]}

Y el último paso es tener algún controlador:

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

y una vista correspondiente: (~/Views/Styles/Foo.cscss):

@model AppName.Models.MyViewModel 

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

body { 
    background-color: Red; 
} 

que ahora se podría incluir como un estilo en el diseño:

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