Main | I'm over here! »
Sunday
Dec062009

Less CSS with .LESS and T4!

After hearing about .LESS for .NET I was ecstatic.  I’ve been looking for something like this for quite some time.  Recently Phil Haack blogged about a T4 template he made using Damien Guard’s helper class to generate CSS files for each LESS file.  This way it would generate static CSS files you could reference.

As great as this was I personally was looking to just have the CSS files appear in the location of the LESS files making it easier to reference/view the CSS files.  The advantage to this is if you have CSS files in a particular directory structure they will be exactly where the LESS files are thus keeping your structure.

For this I utilize T4 Toolbox which is a great library that helps with doing some normally painful tasks in T4 fairly easy.  An example of this is being able to have multiple output files and being able to set their locations which is what makes this possible.  To use this T4 template ensure you’ve installed the T4 Toolbox then just drop it in your project directory.  For the sake of making this work with Phil’s example the assembly references expect the .LESS and YUI Compressor libraries to be in the solution’s root directory.  You can change this to fit your needs.

<#@ template language="C#" hostspecific="True" #>
<#@ output extension="log" #>
<#@ include file="T4Toolbox.tt" #>
<#@ assembly name="$(ProjectDir)\..\dotless.Core.dll" #>
<#@ assembly name="$(ProjectDir)\..\Yahoo.Yui.Compressor.dll" #>
<#@ import namespace="dotless.Core" #>
<#@ import namespace="Yahoo.Yui.Compressor" #>
<#@ import namespace="System.IO" #>

<#
    bool compress = false;
#>

<#
    var currentDirectory = Path.GetDirectoryName(Host.TemplateFile);
    var lessFiles = Directory.GetFiles(currentDirectory, "*.less", SearchOption.AllDirectories);
    
    foreach (var lessFile in lessFiles)
    {
        string file = Path.Combine(Path.GetDirectoryName(lessFile), Path.GetFileNameWithoutExtension(lessFile) + ".css");
        
        Write("* Converting {0} to {1}", lessFile, file);
        
        LessTemplate template = new LessTemplate(lessFile, compress);
        template.Output.File = file;
        template.Render();
    }
#>

<#+
public class LessTemplate : Template
{    
    private static ExtensibleEngine DotLess = new ExtensibleEngine();
    
    protected bool Compress { get; set; }
    protected string File { get; set; }
    
    public LessTemplate(string file, bool compress)
    {
        File = file;
        Compress = compress;
    }
    
    public override string TransformText()
    {
        string css = DotLess.TransformToCss(File);
        
        if (Compress)
            css = CssCompressor.Compress(css);
        
        Write(css);
        return this.GenerationEnvironment.ToString();
    }
}
#>

PrintView Printer Friendly Version

EmailEmail Article to Friend

References (5)

References allow you to track sources for this article, as well as articles that were written in response to this article.

Reader Comments (21)

it's a nice posting ,i like it
thank you for this kind of posting.


http://www.webroyalty.com

January 4, 2010 | Unregistered CommenterNick Matyas

it's a nice posting ,i like it
thank you for this kind of posting.


http://www.webroyalty.com

January 4, 2010 | Unregistered CommenterNick Matyas

it's a nice posting ,i like it
thank you for this kind of posting.


http://www.webroyalty.com

January 4, 2010 | Unregistered CommenterNick Matyas

Use your time properly, accept the help of article submit service and article submission guide and add your fantastic note about this post more fast.

January 25, 2010 | Unregistered CommenterLara20

Thanks for sharing wonderful information, I really enjoyed this article and wish more contents on the topic.
Your article is really informative. I will surely bookmark it for future reference. Good work! Keep it up.

March 2, 2010 | Unregistered Commenterjulius

I relly appreciate the author who posted the simple CSS code with great usage

April 5, 2010 | Unregistered Commentercasino fr

I appreciate this simple code with great usage <A HREF="http://casinomeilleur.org">casino fr</A>

April 5, 2010 | Unregistered Commentercasino fr

thanks a lot dear, im very interesting for your article. im very impresing for this :)

jasa iklan

April 15, 2010 | Unregistered Commenterjasa iklan

thanks a lot .

game online

April 19, 2010 | Unregistered Commentergame online

I Will continue to follow the development of your next websites, thank you, please do not forget to link me, thank you

April 20, 2010 | Unregistered CommenterMovie wallpaper

...This information is very nice and pleasant.i like it Thank you
for sharing...
gadget and tech updates

April 23, 2010 | Unregistered Commenterdoni

CSS or Cascading Style Sheets is a great tool to add a unique look to your web pages. CSS enhances fonts, colors, and even the spacing of your web pages. It is a useful tool to let you separate your HTML content from your style. For example, you can use your HTML file to create and organize the content, but all of the visual presentation including the background, fonts, colors, link effects, text formatting, and spacing are created with a CSS file.

April 29, 2010 | Unregistered CommenterAiza2010

Thank you for sharing useful information..

May 10, 2010 | Unregistered Commenterharleys

Life is nature's most precious gift to mankind. Life is precious . It is sacred. Its every moment is to be enjoyed and cherished , Unfortunately most of people instead of enjoying it , make a mess of it, destroy it , desecrate it. Psychologists for centuries have been searching the reason for this utter unhappiness and dissatisfaction with life and have proposed one or more of the remedies. But the most effective and rapid antidote to all depression, anxiety, worry, stress etc. is a very simple technique. This actually is not a technique but a very simple fact of life which most of people do not notice; consequently they remain happy throughout their life. Let me explain this simple fact of life in a little detail.

Anyway I like this post very much. I will go to share this in my twitter page...

Email Database

May 10, 2010 | Unregistered CommenterBalus

Really its a Fantastic Posting...

microwave rice cooker.

May 10, 2010 | Unregistered CommenterShakthi

These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post.

http://www.governingdynamo.com/blog/2009/8/19/take-a-look-at-some-historic-american-rhetoric.html.

June 2, 2010 | Unregistered CommenterGurusra

wow! It has been a long time since I have heard somebody talk about something with such passion. I didn’t quite understand everything but the passion flows throughout the and it is amazing to see someone be so in depth about something. I can feel it.

Hello everybody, today I'm really very lucky to introduce you threegood online shop now!
sale:

kids jerseys
NFL Jerseys
MLB Jerseys
NBA Jerseys
NHL Jerseys

gucci handbags
Gucci Pelham
Gucci Boston
Gucci Crystal
Gucci Canvas


Vibram
Five Fingers
fivefingers
Five Fingers Kso
Five Fingers Classic
Five Fingers Sprint
FiveFingers shoes


Christian Louboutin
Christian Louboutin shoes
Christian Louboutin sale
Christian Louboutin Boots
Christian Louboutin Pumps
Christian Louboutin Sandals

July 12, 2010 | Unregistered CommenterNFL Jerseys

Another major problem that today's potential house buyers have is in trying to estimate the price and budget for the mortgage repayments. Nobody wants to waste money on renting when instead they could be repaying a mortgage and getting a house that they can call home. But, at the same time, nobody wants to pay more than they absolutely need to for a house or apartment.

July 14, 2010 | Unregistered CommenterGreenlight

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>