Friday, January 11, 2013

I Like it LESS

I know I am late to the game but I like LESS. LESS is a dynamic stylesheet language. It makes CSS a whole lot smarter and easier to use. I won't go into all the specifics of it but LESS has made my CSS work so much better. With its ability to use mixins (functions) and variables makes CSS much more modular and reusable.

I'd recommend any web developer to take a look at LESS or the similar SASS.

Here's some things I use LESS for:
  • Reusable variables for color and other attributes
  • A mixin that properly handles the CSS to round corners for all browsers
  • A mixin that will handle the different browsers to get a gradient background
  • Nested styling
  • darken and lighten functions to get borders and gradients a certain percentage difference from a base color
  • Applying the attributes of an existing CSS class to another CSS class
There are two ways to get LESS to work: client-side compilation or server-side. The client-side compilation will download the LESS syntax and use JavaScript  to compile the syntax to a dynamically loaded stylesheet. This is probably the best way to do it while you're learning and figuring things out.

The server-side can be done two ways: on-the-fly or compilation. Both options are enabled by the dotLESS framework. On-the-fly uses an HTTP handler to convert the syntax on the server as it is requested by on the client. The compilation method is a "manual" process of telling dotless compiler to actually create a CSS file that you can then reference in your page.

No comments: