Less css. My First hand experience

Less CSS is an object oriented approach to CSS development. Just like any programming language, we can use variables, functions and re-usable codes with less.

I am using the JavaScript version of less called less.js which is still under development. The whole idea of using a sass stylesheet came about when my close coding buddy Choon Keat started talking so highly about less. It happened that every time we meet, we would talk about it.

So the css of Artminister.com is run by less.js. Frankly speaking i finished the css in less than an hour and it turned out great.

Let me tell how i am using less to drive my css.

How to run less

As simple as adding the following code in of your site

  <link rel="stylesheet/less" href="/css/artminister.less"> 
  <script src="/js/less-1.0.38.min.js"> 

Or if you want to use the gem, have a look Less Site.

Do remember to set the rel attribute of the css to “stylesheet/less”. Once set the .less file will be parsed using less.js.

Update

The file extension doesnt have to be .less. Css files will also be parsed by less.js

Setting Variables

What i have done is set the common variables such as site width, column spacing, and fonts in the beginning of the css file

@site-width:960px;
@gutter: 20px;
@font-heading:'Vollkorn', serif;
@font-nav:'Nobile', serif;

#Wrapper{width:@site-width; margin:@gutter/2 auto;} 

The above code translates to

#Wrapper{width:960px; margin:10px auto;} 

Mixins

One of the most useful feature of less is mixins. Its a group of code which can be re-used in your css file. So you can edit-once and the changes are reflected all through out.

.last-child{
    margin-bottom:0; border-bottom:0;
  }
  
  .text-shadow{
    -webkit-text-shadow:-1px -1px 1px #fff;
    text-shadow:-1px -1px 1px #fff;
  }

// Textshadow 

nav a{.text-shadow;} // This is how you use a mixin 

You can even set variables in mixins using

.text-shadow(@size:1px, @color:#fff){
 -webkit-text-shadow:-@size -@size @size @color;
    text-shadow:-@size -@size @size @color;
  }

// Call the above mixin using

nav a{.text-shadow(5px,#fff);}

Sweet right.

Write less css

Nesting is one of the main plus points of less. Take the example below

// Without less

nav{text-align:left; margin:0 20px 0;}
nav ul a{color:#444;}
nav ul a:hover{color:#111;}

// With less

nav{
 text-align:left; margin:0 20px 0;
 ul{
     a{color:#444;
       &:hover{color:#111;}
       }
    }
} 

Although there are more lines in the above code, its still simpler. You don’t have to write parent selectors for every line of css.
Which one should you use ? Ruby or JS version

When you have the less ruby gem installed, the .less file is compiled server side. So css is generated even if JavaScript is disabled in the browser. Although according to tests conducted by Choon Keat, JS version is much much faster than the gem.

If you ask me, i am going to go with the JS version. I love to see my hand-coded .less css file in browser source. And its much faster too. I dont really worry about js disabled browsers.

Anways this is just my short review of less.js. If there’s anything you would like to know, post in the comments. I will be happy to answer.