LESS CSS dynamic stylesheet language

I’m pretty sure that you have heard about LESS, very usefull javascript library to create stylesheets in a more organized way, I have worked with it for about six months and it has been a very interesting experience.

Before I tell you how this works, I’d like to start saying that LESS makes the workflow minimize the styles and likewise be more organized since its objective is to minimize number of lines and lines overwrite mutiple times with the same content, having said that one of the improvements of LESS is the possibility of creating style groups, this will avoid writing over and over again the same id or class to create CSS rules, let’s take out with a quick example.

#header h1 {
 font-size: 26px;
 font-weight: bold;
}
#header p {
 font-size: 12px;
}
#header p a {
 text-decoration: none;
}
#header p a:hover {
 border-width: 1px;
}

#header {
 h1 {
  font-size: 26px;
  font-weight: bold;
 }
 p { font-size: 12px;
 a { text-decoration: none;
  &:hover { border-width: 1px }
  }
 }
}

So now with LESS not need to retype the word header twice, to create a new rule only need to indent the new rule and the rest will be created automatically

Another option that allows more easy to create styles with LESS is the ability to create variables, before it was very annoying to remember different color codes, properties of an object or many times not to talk of those long lines of code to comply standards of different browsers, with the option of variables that allow you to use a value in different parts and mixins that let you store multiple css options to apply in different places.

I really recommend using this new technology because this will be the future of new css structures to very large websites or applications with multiple views even basic websites seems to be very useful and easy to use.

if you want to see the full functionality or more information check out this link LESS, there you will find deeper LESS about many things and uses of this technology, and if you like, it may be interesting in this other tool, somewhat similar but slightly more complex, SASS.

I hope you try this tool and enjoy!