使用 Razor 引擎的动态 CSS

• 下载源代码 - 703.74 KB

引言

我在尝试使用 Razor 和 CSS 来开始一个网站，并寻找一种参数化网站 CSS 值的方法，因为我总是把 CSS 写得一团糟 :)。经过几个小时的测试和思考，我写了这段代码。希望对大家有所帮助。这段代码可以帮助你使用 Razor 引擎生成的动态 CSS 文件。你可以使用 Razor 的所有功能来生成 CSS，例如，你可以使用变量、条件语句、函数。我知道 http://lesscss.org/ 存在，但我认为使用 Razor 是一种更标准的方式，因为你使用了视图引擎的所有功能。当然，http://lesscss.org/ 更加复杂和完整，但你可以评估这种方法。

背景

基本思想是动态生成 CSS 文件，但不是整个文件，只是重要的值，比如主色调、字体、所有定义你网站的设置。使用这种方法，你可以拥有一个（或多个）CSS 文件，并将其用作模板，定义变量并在所有 CSS 文件中重用。

Using the Code

使用方法非常简单。安装了 NuGet (http://nuget.codeplex.com/) 后，首先要做的就是安装 razorengine 包。为此，转到“工具”>“库包管理器”>“包管理器控制台”，并在控制台中输入

install-package razorengine

之后，创建一个 ASP.NET MVC 3 Web 应用程序项目。

并选择

转到 _Layout 视图

并更改 CSS 链接

然后添加一个名为 Home 的控制器，添加一个名为 Index 的视图。你可以创建任何控制器和视图。我建议这样做，因为它们是默认的 MVC。然后创建将动态创建 CSS 的控制器。添加控制器 'Style'。你可以选择任何名称，但请注意，控制器的名称必须与 _Layout 视图中使用的 'link href="@Url.Action("Index", "Style")"' 相匹配。

Style 控制器将只有一个 Action，并且将是默认的 Action Index。这个 Action 将生成的 CSS 作为 string 返回

如你所见，这个 Action 将加载 CSS 文件 '~/Content/Site.css'。你可以更改甚至添加更复杂的逻辑来决定加载哪个 CSS 文件，或者你想要的任何内容。加载后，文件使用 Razor.Parse() 解析。这将解析 Razor 模板并生成一个结果内容，在本例中是一个 CSS。现在让我向你展示 Site.css 内部的内容，精彩的部分来了 :)

在 CSS 中，你只需编写 Razor 代码！你可以定义变量或 Razor 允许的任何内容，然后在 CSS 的任何部分中使用它

并重用，重用，重用，只需使用 Razor 语法 '@{}'

好了，就这些了。希望这能在某种程度上对你有所帮助，如果你需要使用动态 CSS。我知道还需要很多改进，但这只是一个开始 :)