ASP.NET Page handling for CSS files.

Question

I know ASP.NET can be configured to handle any file type in any way, but most of us have other work to do, even on weekends. I'm becoming very interested in an asp.net handling pipeline for, say, *.csx files, where I can do something like:

.module-div h2
{
    margin-top: 5px;
    color: [css:Color runat="server" Selector-Include="h2" /]
}

Then in code behind, I could iterate all Color controls with selectors that include "h2" and assign the same colour. I find myself frequently replacing color constants when I decide to change a general scheme colour.

Answer 1

This sounds allot like what lesscss is trying to acomplish. There is a .net port you can read more about at http://blog.smoothfriction.nl/archive/2009/08/13/lesscss-the-.net-edition.aspx. It also allows inheritance of classes etc...

Answer 2

You need to write a custom HTTP Handler for this, which is a class that implements the System.Web.IHttpHandler interface. You will find many articles on the internet about how to do this.

Answer 3

My attempt at playing around with Less for .NET.

Answer 4

We have in the past used a straight .aspx page for our "dynamic" css.

We have a core set of CSS, but we need to display different areas of the site in different colours for branding/helping users distinguish between different sections etc.

The main thing you'll want to do is sort out the response encoding:

private void Page_Load(object sender, System.EventArgs e)
{
  Response.ContentType = "text/css";
}

Then on the code in front:

<%
string strSiteArea = this.Page.Request.QueryString["sitearea"];
string strCustomStyles = this.Page.Request.QueryString["customcssstyles"];
string extralightcolour = "";
string lightcolour = "";
string normalcolour = "";
string darkcolour = "";
string customcolour = "";

switch (strSiteArea)
{
  case "miscellaneous": 
    extralightcolour = "#F2F2F2";      
    lightcolour = "#E6E6E6";
    normalcolour = "#999999";
    darkcolour = "#666666";     
  break;
  case "pressoffice":
    extralightcolour = "#F0F4F7";      
    lightcolour = "#E2E9EE";
    normalcolour = "#6D8DA8";
    darkcolour = "#5C768D";
  break;
  // etc
}
%>
h1{color: <%= darkcolour %>;font-family: Arial;padding-left: 0;margin-left: 0;}
h2{color: <%= darkcolour %>;font-family: Arial;font-size: 1.2em;font-weight: bold;margin-bottom: 0;padding-bottom: 0;}
h3{color: <%= darkcolour %>;font-size: 1.1em;font-weight:normal;margin-bottom: 0;}
h4{color: <%= darkcolour %>;margin-bottom: 0;font-size: 1.1em;font-weight:normal;font-style:italic;}
.backgroundheading{margin: 0 0 0 0;background-color: <%= normalcolour %>;color: #FFF;font-weight: bold;font-family: Arial;font-size: 1.0em;text-align: left;padding: 3px 5px 3px 5px;}
.backgroundheadinglight{margin: 0 0 0 0;background-color: <%= lightcolour %>;color: #000;font-weight: bold;font-family: Arial;font-size: 1.0em;text-align: left;padding: 3px 5px 3px 5px;}
.backgroundheadingdark{margin: 0 0 0 0;background-color: <%= darkcolour %>;color: #FFF;font-weight: bold;font-family: Arial;font-size: 1.0em;text-align: left;padding: 3px 5px 3px 5px;}
.background{margin: 0 0 0 0;background-color: <%= normalcolour %>;text-align: left;padding: 3px 5px 1px 5px;}
.backgroundlight{margin: 0 0 0 0;background-color: <%= lightcolour %>;text-align: left;padding: 3px 5px 1px 5px;}
.backgrounddark{margin: 0 0 0 0;background-color: <%= darkcolour %>;text-align:left;padding: 3px 5px 1px 5px;}
.backgroundcolorextralight{background-color: <%= extralightcolour %>;}

And then call the CSS in a page such as:

<link rel="stylesheet" href="/CSS/GenerateCss.aspx?siteArea=pressoffice" />

This gave us the power to have a number of different colour schemes using a consistent set of CSS styles, and change a page with ease based on the querystring passed in.