Dynamic CSS for ASP.NET MVC? - css

Question

It looks like the .NET community in general has not picked up on CSS compilers. In searching Google I've not found anything even remotely relevant.
Has anyone that is using ASP.NET MVC figured out a scheme to more intelligently generate their CSS? I'd love to be able to run my CSS through Razor for example, or for SASS to get ported over or what have you. Maybe I have a new side project on my hands :)

Answer 1

I'd love to be able to run my CSS through Razor
What stops you?
public class CssViewResult : PartialViewResult
{
public override void ExecuteResult(ControllerContext context)
{
context.HttpContext.Response.ContentType = "text/css";
base.ExecuteResult(context);
}
}
public class HomeController : Controller
{
public ActionResult Index()
{
return new CssViewResult();
}
}
and in ~/Views/Home/Index.cshtml:
#{
var color = "White";
if (DateTime.Now.Hour > 18 || DateTime.Now.Hour < 8)
{
color = "Black";
}
}
.foo {
color: #color;
}
Now all that's left is to include it:
<link href="#Url.Action("index")" rel="stylesheet" type="text/css" />
You can also make the template strongly typed to a view model, write loops, ifs, inclusions, ...

Answer 2

A slight modification of #darin-dimitrov's answer. This adds the ability to pass in a model to the CssView:
public class CssViewResult : PartialViewResult
{
public CssViewResult()
{
}
public CssViewResult(object model)
{
if (model != null)
{
ViewData.Model = model;
}
}
public override void ExecuteResult(ControllerContext context)
{
context.HttpContext.Response.ContentType = "text/css";
base.ExecuteResult(context);
}
}
and then you just consume it with:
return new CssViewResult(model);

Answer 3

Phil Haack has made a blog post about LessCSS and .net:
http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

Answer 4

I know this is an old thread, I am fairly new to ASP.NET.
Working with ASP.NET Core, I am trying to use #Darin Dimitrov's answer to allow me to set custom styles using data from an external API. To the OP's question, I know you said "Dynamic" but it seems as though you really want "Compiled". I am looking for "Dynamic".
It appears the technique of returning a partial view with response type text/css works pretty well for this solution. However, the syntax used here does not work for me in ASP.NET Core 3.1. Here is the solution I used:
Instead of HomeController I am using ThemeController as it is relevant to me.
In ThemeController.cs
public async Task<IActionResult> Index()
{
var colors = await _apiService.GetThemeColors();
Response.ContentType = "text/css";
return PartialView(colors);
}
In the view ~/Views/Theme/Index.cshtml
#model ThemeColors
#{
var color = Model.primaryColor;
}
.btn-primary {
background-color: #color;
}
And then in my _Layout.cshtml
<link href="#Url.Action("Index", "Theme")" rel="stylesheet" type="text/css" />
I hope this helps someone, if anyone who is more knowledgeable around this topic can point to more relevant resources that would be greatly appreciated.

Answer 5

I'm using ASP.NET MVC 4, Adding ContentType="text/css" to the page directive works for me.

Answer 6

Posting below solution hoping that might help someone, not sure if this is best way to implement.
I had to populate input elements dynamically inside one of the tables column field, so i had to set css position field dynamically while looping through data.
Here is the code snippet,
<td>
<label>Extract Values</label>
#{ int topPostn = 20; string topPs;}
<div style="position:relative">
#foreach (var extracts in ViewData["excode"] as List<ExtractCode>)
{
topPostn += 25;
topPs = (topPostn).ToString() + "px";
<span style="position: absolute; top: #topPs" >
<input class="ag-checkbox-input" type="checkbox" id="someid" value="#extracts.value" name="xyz" aria-label="Toggle Row Selection">#extracts.displayName
</span>
}
#{ topPostn = 20; topPs = "";}
</div>
<td>