CSS extended through dynamic behaviors | Bypeople

CSS extended through dynamic behaviors

As most of you know, we’re always looking for new tools and hacks to help web designers / developers with their work. Today we’ve found a neat tool that will help you enhance the power of CSS. LESS is a nice JavaScript library developed by Alexis Sellier that extends CSS by adding dynamic behaviors on the way of variables, mixings, operations and functions. The library offers support for IE6+ browsers and webkit and from the server-side is powered through the file Node.js.

LESS works like this. The variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one single line of code, making things easier for the developer.

lecss01

Regarding mixings, these allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixings can also present a function behavior and take arguments.

lecss02

With LESS you are not forced to construct long selector names to specify inheritance, you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter. Another aspect is Functions and Operations. First we have operations, these elements let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing you to manipulate values in any way you want.

lecss03

By being an extension to CSS, LESS is not only backwards compatible with CSS, but also the extra features it adds. This makes learning LESS a something simple for web developers but if necessary, the extension lets you fall back to CSS. You can visit the official site to find the complete documentation and tips on how to take advantage of all the great features of LESS.

Visit LESS official site.



Related Deals


Related Posts