動態樣式表使用剃刀

如何使用剃刀在CSS文件？動態樣式表使用剃刀

我使用Razor View Engine了一段時間，我很好奇使用它的樣式表。我可以用剃刀在.cshtml文件<style>塊，但我想知道如果我可以用它在外部的.css文件也（想有一個.cscss格式）。所以，我用Google搜索了一下，發現兩件事情：

第一個是LESS：「動態樣式表語言」。它似乎易於使用和功能強大的所有功能，但我需要Razor-C＃，真的。

第二個是Dynamic CSS Using Razor Engine CodeProject文章，更像我想要的，但它沒有緩存或預編譯支持（「不支持」，我的意思是作者沒有提到這些方面）。我也希望在Visual Studio中有一些語法突出顯示，但這是次要的。

所以，我怎麼能寫在以最小的性能損失CSS文件，最好用語法高亮剃刀？

是否有「更完整」的項目？
我可以提高上述項目達到緩存/編譯？如果是這樣，怎麼樣？

作爲一個方面說明：
我發現了一個名爲RazorJS項目。這就像我想讓CSS獲得緩存支持的Javascript版本一樣。我提到這只是爲了澄清我的需求。我目前不需要在Javascript中使用Razor，但是我猜如果我用CSS做出來，用Javascript做同樣的事情不會太難。

來源

2012-04-23 Şafak Gür

您一直在討論語法突出顯示這與剃刀無關。它是你的編輯器的Visual Studio。你試圖達到什麼目的，你爲什麼要在你的CSS中使用'剃鬚刀'？ – TJHeuvel 2012-04-23 11:54:42

@TJHeuvel爲什麼有人想在他們的HTML剃鬚刀？爲什麼人們使用服務器端腳本語言？因爲他們希望他們的頁面是動態的。這樣他們可以將數據存儲在數據庫中而不是HTML文件中。所以我爲什麼要在我的CSS中使用剃鬚刀，是因爲我希望我的CSS也是動態的。我可能會將設計相關的數據保存在我的數據庫中（如背景顏色），並希望在我的css中使用它。至於intellisense，visual-studio就是這個qustion的標籤之一。我想知道我能如何（如果可以的話）在css文件中使用razor intellisense，正如我提到的那樣，它對我來說只是次要的東西。 – 2012-04-23 12:50:38

@ d4wn：你爲什麼希望你的CSS是動態的？ SASS/LESS和視圖引擎方法之間有相當大的區別，在後一種情況下，您只是發送客戶端非緩存的東西，可能只是靜態的...：S – 2012-04-23 13:18:10

您可以創建一個自定義視圖引擎：

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>

_{[注，如果你得到你可能需要改變外延式的版本號，以配合您的剃刀引擎版本的程序集綁定錯誤。您可以通過查看對System.Web.WebPages的引用屬性來檢查您正在使用的版本。在您的項目剃刀組裝件]}

而最後一步是有一些控制器：

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

來源

2012-04-23 13:14:32

這正是我所尋找的，謝謝您。我的下一個任務是找到如何讓VS爲** .cscss **文件做一些語法高亮（＆intellisense），我猜。 – 2012-04-23 17:11:12

@Darin Dimitrov我已複製此代碼。當我想在VS中編譯（F5）我的asp.net mvc3解決方案時，出現此錯誤：錯誤無法確定「〜/ Views/Styles/Test.cscss」的代碼語言。 AMS \ AMS \ ASPNETCOMPILER 任何想法爲什麼？ – elranu 2013-09-19 20:04:55

@Darin，代碼真棒，但我想知道如何修改它以服務Less文件，因爲這涉及額外級別的解釋......想法？ – ekkis 2013-12-03 02:09:16

動態樣式表使用剃刀

回答

相關問題