Task: the CSS is huge and unmanageable. Please make it manageable, easily readable and some people want to add themes on top of the existing CSS menace. In this post we will go over the different tools one can use to rid themselves of the CSS horror. In particular, LESS/CSS compiler and Visual Studio’s text template (T4) engine to automatically generate a table of contents based on the comments in the LESS file.

LESS

LESS is awesome. There is SASS too but there is almost no difference. LESS is basically CSS with nesting, variables and (orgasm) double-slash (//) comments. Seriously I hate slash-star. I hate closing them all the time! Don’t you?

LESS compiles into CSS with a LESS compiler. Duh! That’s the whole point! So let’s set up our dev environment, so that whenever we press “Save” while editing a .less file, it will automatically write the conversion to a parallel .css file. Neat!

Visual Studio users

Download and install Web Essentials. Done!

Sublime Text users

First step is we need a LESS compiler on our Windows machine. That’s right, these are instructions for noob Windows users. Although, honestly, UNIX/Linux/Mac setup is exactly the same.

1. We begin with NodeJS. That’s right, we need NodeJS to install LESS. Go on, install NodeJS for Windows. Done? Does your command prompt recognize “node” and “npm” (node package manager) command? Good… If not, check your PATH environment variable.
2. Next step, using npm, install LESS. That’s right, LESS is just one of many packages offered by NodeJS. You, my friend, have just opened a can of worms. So type this in command prompt:

   $ npm install -g less

3. Open Sublime Text 2 or 3 and, if you haven’t already done so, install the package manager. The instructions are in the link, but literally, you open the console (Ctrl+`) and paste the long line of code for the package manager.
4. Hit Ctrl+Shift+P, type “Package Control”, select “Package Control: Install Package”, hit ENTER.
5. In the package search type “less”. Make your pick, it’s X-mas! I prefer Less2Css (for conversion) and LESS (syntax highlighter).

Eclipse users

1. Repeat steps 1-2 from Sublime setup above.
2. Next, install this plugin for Eclipse. Basically the Eclipse URL of the plugin is: http://www.normalesup.org/~simonet/soft/ow/update/
3. You will need to setup a Run configuration in order to trigger the LESS to CSS conversion.

Converting CSS to LESS

There are many converters out there, but I prefer this one for extra large CSS files, because unlike the others, it actually amalgamates redundant groups.

Now that you have your neat LESS file and the LESS compiler is set up, we can start licking the LESS file until we are satisfied!

Polishing the LESS file

Variables

First step is to extract all frequently used colors and dimensions into variables, like this:

@somevar: 20px;
@someColor: #c9c9c9;

Web Essentials, the add-on for Visual Studio can do this automatically when you hover over a value and hit “Extract all to a variable”. Rinse and repeat for all values.

Nesting @media queries

CSS only allows @media queries to be on top. LESS allows them to be nested within other queries:

.some-class {
    width: 200px;
    @media (max-width: 768px) {
        width: 100%
    }
}

Sections: generating table of contents with T4

Next, the hard part. We will split the large LESS file into sections:

• use double-line-equals for headings i.e. //=== name ===
• use single-line-dash for sub headings i.e. //— sub heading —

And now the fun part: we will write a simple parser in T4 (Text Template), to generate us the table of contents. T4 is Visual Studio’s language for code generation. They are text template files, with a .tt extension. We right click on them and run them and usually they generate some code or text. There are runtime text templates too. Apparently.

First install the Tangible T4 Editor extension for Visual Studio to get syntax highlighting for .tt files. Then add a new item to your project, select Visual C# -> General -> Text Template for the template. Once you create it, it will already output to your-file.txt which is set up with the following line.

<#@ output extension=".txt" #>

The syntax is similar to ASP.NET, similar to PHP. Template code is within <# #>. Everything else is output. You can also output with Write(“text”) function.

So here it is our template code:

<#@ template debug="false" hostspecific="true" language="C#" #>
<#@ assembly name="System.Core" #>
<#@ import namespace="System.Linq" #>
<#@ import namespace="System.Text" #>
<#@ import namespace="System.Collections.Generic" #>
<#@ import namespace="System.IO" #>
<#@ output extension=".txt" #>
<#     var fileContent = File.ReadAllText(this.Host.ResolvePath("iceIntranet.less"));     var commentLines = fileContent.Split('\n')             .Select(x => x.Trim())
            .Where(x => x.StartsWith("//"));
    foreach (var line in commentLines) {
        var line2 = line;
        line2 = line2.Replace("/", "");
        line2 = line2.Replace("=", "");
        line2 = line2.Replace("-", "");
        line2 = line2.Trim();
        if (line.Contains("==")) {
            WriteLine("// " + line2);
        }
        if (line.Contains("--")) {
            WriteLine("//     " + line2);
        }
    }
#>

Notes on this code:

• In order to be able to read local project files we need to set hostspecific=”true”

Run the TT in Visual Studio by right-clicking on the T4 file. Look at the generated file. Copy+Paste its contents to the LESS. There you go, a neat table of contents.

// Menu
//     buttons
//     responsiveness
// Masterpage
//     form
//     blog section

Peace on you, you CSS freaks!

The post Maintaining CSS with LESS/CSS and T4 appeared first on Coding Insight.