Navigation
About Me

MS certified C#/ASP.NET software developer from Baltimore, MD.

Search
Subscribe
Main | I'm over here! »
Sunday
06Dec2009

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 (5)

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

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>