LESS

I just started using LESS at my new job. LESS is a css programming language similar to SASS. This means that you can use variables, nest your style rules and write functions and expressions to save yourself time and code.

For example, say your style guide calls for all links to be #069, and hover states to be #ff0. You can code it this way:

@linkColor: #069;
@hoverColor: #ff0;
a:link {
color:@linkColor;
}
a:hover {
color:@hoverColor;
}

LESS saves you from writing long style rules like:
#mainContainer #leftCol ul.productList a:hover {#color:#ff0;}

Instead, your code might be structured this way:


#mainContainer {
   width:980px;
   #leftCol {
      border:1px solid #ccc;
      ul.productList {
         width:180px;
         a:link {
            font-size:12px;
            &:hover {
               color:#ff0;
            }
         }
      }
   }
}

The nesting is similar to traditional programming languages. If you keep your code organized in this fashion, it makes it much easier to sort out issues of precedence. You probably noticed the ampersand in the hover rule. That tells LESS that a pseudo-class is being defined for the parent element.

You can also write expressions to calculate things like the width of your divs or the color of your backgrounds.

@mainContainerWidth: 980px;
@leftNavWidth: 180px;
@mainBGColor: #333;

#mainColumn {
   width:@mainContainerWidth - @leftNavWidth;
   background-color: @mainBGColor * 2;
}

You can also include entire rulesets into other classes. If you want to create a blue box module, you could start with a class like:


.blueBox {
background-color:#069;
color:#fff;
width:300px;
border:1px solid #ccc;
}

Then you can create a more customized version of this box:


.productBox {
.blueBox;
padding-left:10px;
font-family:arial;
}

The resulting code would be:


.productBox {
background-color:#069;
color:#fff;
width:300px;
border:1px solid #ccc;
padding-left:10px;
font-family:arial;
}

Your LESS code needs to be compiled into CSS. To compile my LESS code, I’ve been using simpLess. It both compiles and minifies your LESS code into a tidy CSS file. Check it out: http://wearekiss.com/simpless

For more info on LESS visit http://lesscss.org/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s