dotLess-first look

In this post I am going to discuss an interesting find through a training session I attended (html 5). During this session, the instructor mentioned about dotless. This is something I was looking for a while earlier, but was either unable to find it out or didn’t pay interest at that time for some reason. In short, dotless is a dynamic css framework for .net enabling you to write less amount of css, instead of writing loads and loads of css. An important thing to note is that it’s a port of ruby’s less library.

The most interesting thing with dotless compiler is the amount of css you have to write in comparison to writing plain old css. Consider the following for example. In this case I am trying to write some css that does the following:

Apply some style

  • to a div w/ id as “header”
  • to a span w/ id as “span1″ within “header”
  • to an anchor tag w/ class as “anchor1″

And, apply some style

  • to a div w/ id as “content”
  • to a span w/ class as “span2″ within “content”
  • to a span w/ class as “span3″ within “content”
  • to an anchor w/ id as “anchor2″ within “content”

In order to do this I would have to do the following in css:

#header {
  border: 1px solid #d3d3d3;
  background: #e6e6e6;
  font-weight: normal;
  border-radius: 20px;
}

#header #span1 {
  color: Red;
}

#header .anchor1 {
  text-decoration: none;
}

#content {
  border: 1px solid #d3d3d3;
  border-radius: 20px;
}

#content .span2 {
  color: Blue;
}

#content .span3 {
  color: Maroon;
  font-size: large;
  text-transform: lowercase;
}

#content #anchor2 {
  text-decoration: none;
  font-weight: bolder;
}

This css was applied to the following html:

	<div id="header">
		<span id="span1">Title text</span> <a class="anchor1" href="javascript:void(0)">Title link</a>
	</div>
	<div id="content">
		<span class="span2">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus metus, placerat at molestie id, laoreet at libero.
		</span>
		<br />
		<span class="span3">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus metus, placerat at molestie id, laoreet at libero.
		</span>
		<br />
		<a href="#" id="anchor2">sample link</a>
	</div>

Just consider the amount of typing it takes. This is where dotless comes in to the picture. Following is the code for dotless to represent the same:

@color-one: Red;
@color-two: Blue;

.setradius(@rad: 5px)
{
    border-radius: @rad;
}

#header
{
    border: 1px solid #d3d3d3;
    background: #e6e6e6;
    font-weight: normal;
    .setradius(20px);

    #span1
    {
       color: @color-one;
    }

    .anchor1
    {
	   text-decoration: none;
    }
}

#content
{
    border: 1px solid #d3d3d3;
    .setradius(20px);

    .span2
    {
	    color: @color-two;
    }

    .span3
    {
	    color: Maroon;
	    font-size: large;
	    text-transform: lowercase;
    }

    #anchor2
    {
	    text-decoration: none;
	    font-weight: bolder;
    }
}

If you notice the above syntax for dotless, it takes much less in terms of typing when compared to plain old css. This example follows the mixins (line 4) and nested rules syntax of dotless (9-25 and 27-49). It also uses variables (1,2, 18 and 34) defined by dotless. Also, if you notice, it closely follows the hierarchy of the elements within the html text. Mixins are function like dotless semantics used to reduce repetition in css. As the example indicates, nested rules are used to represent the css of elements within a parent element (ex. “#header”), thereby reducing the need to specify the parent element when defining child elements (ex. we can now specify just “#span1″ instead of “#header #span1″.

To use this, you could either add this file with the less extension in your projects, with the corresponding handler mappings. Or, you could invoke the dotless compiler as shown below and include it in your project. The syntax is dotless.Compiler.exe <source_less_file> [<destination_file_name_required>]. If the destination file name is ignored the source file name is used as the name for the file generated. Thus, issuing the following command would generate a file called nested2.css.

C:\Software\dotless-v1.2.2.0> dotless.Compiler.exe nested2.less

I don’t think an elaborate discussion about the syntax of dotless is necessary in this post as the dotless site does that in a much nicer way here!

I guess the dotless documentation is detailed enough to explain the ways dotless could be used. So, apart from that I wish to discuss another method by which you could put the dotless library to use. Using this method you don’t have to add a reference to dotless.core.dll in your project, nor you have to add any handler mappings. To achieve this you could use a simple batch script that compiles your less scripts to css scripts. You may also choose to have this as a pre-build action is Visual Studio (will probably update the post with more information on this soon). By this way you get to see about the errors immediately, instead of verifying every single page in your project.

(Move your mouse over every line for some quick info)

@ECHO OFF
IF “%1″==”" GOTO Continue
    cd %1
    del *.less.css
    for /f %%a IN (‘dir /b *.less’) do dotless.Compiler.exe %%a %%a.css
    pause
    exit
:Continue
    echo “This batch file expects a folder name”
    pause
    exit



The above script can also be modified as shown below, to always compile a certain folder(less-css in this case), either manually or using a pre-build action, instead of passing a folder for it to compile.

(Move your mouse over every line for some quick info)

cd less-css
del *.less.css
for /f %%a IN (‘dir /b *.less’) do dotless.Compiler.exe %%a %%a.css
pause
exit



In a nutshell, the batch script does this: First check if there is an argument that specifies the folder that has the .less files. If not, display some help and exit. Else, change to that directory and delete the existing .less.css files. This batch file will convert .less files to .less.css files, and this is the reason for deleting the .less.css files (not mandatory though). Then for every .less file in the directory call the dotless compiler and compile the file with a .css extension.

One disadvantage in this case is that, assuming you have added the .less files in the project, the .css files will be generated “outside” the project and so won’t show up in the project. Thus using these files as a <link /> tag would be marked with a red line. To circumvent this, you may generate once and add it to the project. Then, future dotless compiles will overwrite the file and visual studio will stop identifying the css files as missing files.

In order for the above batch file to work, you need to have the dotless.Compiler.exe extracted to your hard drive and also added to the system path (environmental variable). The section below describes the steps on how to do this (feel free to skip it if you are aware about the steps).

Assuming the dotless compiler is present in “c:\Software\dotless-v1.2.2.0″, this is how you could add it to the path variable (windows vista, 7):

  • Right click on “Computer”, select “Properties”
  • Click on “Advanced System Settings” on the left
  • Click on the “Advanced” tab
  • Click on the “Environment Variables” button
  • Under “User variables for <user_name>” scroll and point the “Path” variable
  • Click on the “Edit” button
  • Towards the end add a semi-colon “;” if not present and paste the path “c:\Software\dotless-v1.2.2.0″ with a semi-colon and press on “OK”

Once you do this, the above batch file should work just fine. Else you may have to have the complete physical path of the compiler in the batch file.



I guess this post would have given you a head-start with dotless. I have started using it and in case I find out more stuff, will post it!

Share