Bản định kiểu động Sử dụng dao cạo

Question

Tôi có thể sử dụng Razor trong tệp CSS như thế nào?

Tôi đang sử dụng Razor View Engine trong một thời gian và tôi đã tò mò về việc sử dụng nó trên các tờ định kiểu. Tôi có thể sử dụng Razor trong <style> khối .cshtml file nhưng tôi đã tự hỏi nếu tôi có thể sử dụng nó trong bên ngoài .css file cũng (muốn có một định dạng .cscss). Vì vậy, tôi googled nó và tìm thấy hai điều:

Đầu tiên là LESS: "Ngôn ngữ định kiểu động". Nó có vẻ dễ sử dụng và mạnh mẽ với tất cả các tính năng nhưng tôi cần Razor-C#, thực sự.

Thứ hai là Dynamic CSS Using Razor Engine, một bài viết CodeProject giống như những gì tôi muốn nhưng nó không có bộ nhớ đệm hoặc hỗ trợ biên dịch trước (bởi "không hỗ trợ") có nghĩa là người viết không đề cập đến các khía cạnh này). Tôi cũng muốn có một số cú pháp tô sáng trong Visual Studio nhưng đây là thứ cấp.

Vì vậy, làm thế nào tôi có thể viết Razor trong tệp CSS với chi phí hiệu suất tối thiểu và tốt nhất là với làm nổi bật cú pháp?

• Có dự án "hoàn chỉnh hơn" cho điều đó không?
• Tôi có thể cải thiện dự án trên để đạt được bộ nhớ đệm/biên dịch không? Nếu vậy, làm thế nào?

Như một mặt lưu ý:
Tôi tìm thấy một dự án có tên RazorJS. Nó giống như phiên bản Javascript của cùng một thứ tôi muốn cho CSS với hỗ trợ bộ nhớ đệm của nó. Tôi đang đề cập đến điều này chỉ để làm rõ nhu cầu của tôi. Tôi không cần phải sử dụng Razor trong Javascript hiện tại nhưng tôi đoán nếu tôi làm cho nó ra với CSS, làm điều tương tự với Javascript sẽ không quá khó.

Answer 1

Bạn có thể tạo một công cụ giao diện tùy chỉnh:

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

và cũng đăng ký với một phần mở rộng tùy chỉnh trong Application_Start:

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

và bên trong web.config liên kết mở rộng với một nhà cung cấp xây dựng:

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

_{[lưu ý, nếu bạn gặp lỗi ràng buộc lắp ráp, bạn có thể cần phải thay đổi số phiên bản trong loại tiện ích mở rộng để khớp với phiên bản của công cụ Dao cạo. Bạn có thể kiểm tra phiên bản bạn đang sử dụng bằng cách xem các thuộc tính của tham chiếu của bạn đến System.Web.WebPages.lắp ráp Razor trong dự án của bạn]}

Và bước cuối cùng là phải có một số điều khiển:

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

và một cái nhìn tương ứng: (~/Views/Styles/Foo.cscss):

@model AppName.Models.MyViewModel 

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

body { 
    background-color: Red; 
} 

mà bây giờ có thể được bao gồm như là một kiểu trong Bố cục:

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