Click here to Skip to main content
15,314,737 members
Articles / Web Development / CSS
Posted 22 Mar 2011

Tagged as


37 bookmarked

Dynamic CSS using Razor Engine

Rate me:
Please Sign up or sign in to vote.
4.86/5 (15 votes)
22 Mar 2011CPOL2 min read
Using Razor for generating a CSS based in a .css like a template


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 :). 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 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, is more complex and complete, but you can evaluate this approach.


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 ( 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. :)

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. :)


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


About the Author

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

Comments and Discussions

Questiondoes it work with ASP MVC 5, and can I return CSS from Stringbuilder Pin
longnights19-Jan-17 11:55
Memberlongnights19-Jan-17 11:55 
GeneralMy vote of 5 Pin
Thorsten Bruning15-Jul-15 8:33
MemberThorsten Bruning15-Jul-15 8:33 
Questionwill this work in ASP MVC 5 with caching? Pin
longnights3-Jun-15 16:28
Memberlongnights3-Jun-15 16:28 
QuestionDoes it work in MVC 4? Pin
Lucky Lam21-Oct-14 1:44
MemberLucky Lam21-Oct-14 1:44 
QuestionCaching Css using OutputCache Pin
STalha.Munir2-Jan-14 5:54
MemberSTalha.Munir2-Jan-14 5:54 
AnswerRe: Caching Css using OutputCache Pin
STalha.Munir2-Jan-14 11:42
MemberSTalha.Munir2-Jan-14 11:42 
QuestionAbout RazorEngine lib Pin
Vahid_N3-Dec-13 8:36
MemberVahid_N3-Dec-13 8:36 
QuestionThat's brilliant Pin
Sacha Barber18-Jun-12 22:57
MemberSacha Barber18-Jun-12 22:57 
AnswerRe: That's brilliant Pin
Sarvesh Kushwaha11-Oct-13 0:57
MemberSarvesh Kushwaha11-Oct-13 0:57 
QuestionHow can i post a value from controller to css file?? Pin
-tamilan2-27-Jan-12 8:52
Member-tamilan2-27-Jan-12 8:52 
AnswerRe: How can i post a value from controller to css file?? Pin
-tamilan2-27-Jan-12 23:47
Member-tamilan2-27-Jan-12 23:47 
AnswerRe: How can i post a value from controller to css file?? Pin
asanoguera29-Jan-12 12:52
Memberasanoguera29-Jan-12 12:52 
GeneralRe: How can i post a value from controller to css file?? Pin
-tamilan2-30-Jan-12 3:30
Member-tamilan2-30-Jan-12 3:30 
GeneralMy vote of 3 Pin
Dhol Gaurav5-Jan-12 19:39
professionalDhol Gaurav5-Jan-12 19:39 
GeneralRe: My vote of 3 Pin
asanoguera29-Jan-12 12:56
Memberasanoguera29-Jan-12 12:56 
Questionmaybe some less? Pin
Seishin#25-Mar-11 3:01
MemberSeishin#25-Mar-11 3:01 
GeneralLittle Improvement Pin
Remi BOURGAREL23-Mar-11 4:42
MemberRemi BOURGAREL23-Mar-11 4:42 
GeneralRe: Little Improvement Pin
asanoguera23-Mar-11 7:48
Memberasanoguera23-Mar-11 7:48 
GeneralRe: Little Improvement Pin
Remi BOURGAREL23-Mar-11 22:58
MemberRemi BOURGAREL23-Mar-11 22:58 
GeneralRe: Little Improvement Pin
asanoguera24-Mar-11 3:22
Memberasanoguera24-Mar-11 3:22 

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

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