css - sirve - Hojas de estilo dinámicas usando Razor

link rel= stylesheet para que sirve

Question

¿Cómo puedo usar Razor en archivos CSS?

Estoy usando Razor View Engine por un tiempo y tenía curiosidad por usarlo en las hojas de estilo. Puedo usar Razor en bloques <style> de archivos .cshtml pero me preguntaba si puedo usarlo en archivos .css externos también (me gustaría tener un formato .cscss ). Así que busqué en Google y encontré dos cosas:

El primero es MENOS : "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 se parece más a lo que quiero, pero no tiene memoria 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?

• ¿Hay 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:
Encontré 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

Puede crear un motor de vista personalizado:

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 también registrarlo con una extensión personalizada en Application_Start :

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

y dentro de web.config asocian la extensión con un proveedor de compilació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 al ensamblado System.Web.WebPages.Razor 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 puede incluir como un estilo en el Diseño:

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