Click here to Skip to main content
Click here to Skip to main content
Go to top

Dynamic CSS using Razor Engine

, 22 Mar 2011
Rate this:
Please Sign up or sign in to vote.
Using Razor for generating a CSS based in a .css like a template

Introduction

I was playing around with Razor and CSS trying to start a website and searching a way to parameterize the CSS values for my site, because I always make a mess in the CSS Smile | :) . After a few hours of testing and thinking, I wrote this code. I hope this will be helpful. This code helps to use a dynamic CSS file generated with Razor engine. You can use all the power of Razor to generate the CSS, for example, you can use variables, conditionals, functions. I know that http://lesscss.org/ exists, but I think that using Razor is a more standard way because you are using all the power of the View Engine. Of course, http://lesscss.org/ is more complex and complete, but you can evaluate this approach.

Background

The basic idea is to generate the CSS file dynamically, but not the entire file, just the important values, like the primary colors, fonts, all settings that define your site. Using this approach, you can have one (or more) CSS file and use this like a template and define variables and reuse in all CSS files.

Using the Code

The use is very simple With NuGet (http://nuget.codeplex.com/) installed, the first thing you have to do is install the package of razorengine. To do that, go to Tools > Library Package Manager > Package Manager Console and write in console:

install-package razorengine

After that, create an ASP.NET MVC 3 Web Application Project.

and select:

Go to _Layout View:

and change the CSS link:

Then add a Controller named Home, add a View named Index. You can create any Controller and View. I suggest that because they are the default MVC. Then create the controller that will create the CSS dynamically. Add the controller 'Style'. You can choose any name, but note that the name of controller must match with the 'link href="@Url.Action("Index", "Style")"' used in _Layout View.

The Style Controller will only have an Action, and will be the default Action Index. This Action returns the CSS generated in a string:

Like you can see, this Action will load the CSS file '~/Content/Site.css'. You can change or even add more complex logic to decide which CSS file loads, or whatever you want. And after load, the file parses with Razor.Parse(). This will parse the Razor template and generate a result content, in this case a CSS. Now let me show you what is inside the Site.css, here comes the good part. Smile | :)

In the CSS, you just write Razor Code! You can define variables or whatever that Razor allows you, and then use in any part of the CSS:

and reuse, and reuse, and reuse, just use a Razor syntax '@{}':

Well, that's all. I hope this will be helpful in some way if you need to use dynamic CSS. I know that many improvements are needed, but this is just a beginning. Smile | :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

asanoguera
Software Developer
Argentina Argentina
I born in 1977, I Studies computer science from age 12, at 18 he was working in a company that developed solutions for clinical and biochemical laboratories in QuickBasic and Btrieve, at 21 I started to work in a consulting firm that developed solutions for companies in QBX, VB5 and MSAccess, I also worked as a senior programmer for 5 years in a government agency analyzing and building management systems and statistics for decision making in VB6, ASP and MS-SQL 2000, independently developed several projects and also work for companies in the abroad in ASP / ASP.NET and MS-SQL 2000, I currently developing desktop applications and Web applications in MVC 3, Razor, Entity Framework, jQuery, VB.NET and C# and MS-SQL 2008
Follow on   Twitter

Comments and Discussions

 
QuestionThat's brilliant PinmvpSacha Barber18-Jun-12 22:57 
AnswerRe: That's brilliant PinmemberSarvesh Kushwaha11-Oct-13 0:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 22 Mar 2011
Article Copyright 2011 by asanoguera
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid