Topics
Social
Subscribe

Why You Should Try Using LESS

Mobile phone

While there is plenty of buzz around new javascript MVC frameworks, WebGL, and flappy bird - if you're developing for the web, and building anything of substantial size, getting your work to look right is essential for your users.

Achieving this can be annoying because, well - CSS. So while CSS pre-processors are nothing new, they're definitely still buzzworthy. LESS can be invaluable for expediting development and creating more flexibility and scalability around your styles, on top of assisting color blind developers. 

How LESS Helped Me Do More

Recently, our team here at CQL was faced with an interesting challenge: how can we quickly iterate a base template for an enterprise eCommerce site across 15 brands? With a very aggressive deployment schedule, we had to do something to make our clients happy, and on time, so we decided to use LESS. 

And it has proven to be the right choice.

After writing a simple inhouse file watching command line tool to auto compile the LESS files, we got to work. Since all the brands are sharing very similar HTML, the idea was to have a “global” stylesheet filled with variables and mixins - essentially placeholders for style values. Each brand would have their respective branding files which import the global sheet and compile to brand specific CSS. Simple? Yes. Awesome? For sure. 

Then came implementing all the time saving features of the language, namely parametric mixins (yes, typing vendor prefixes can be fun when you only type them once!).

Example:

.maingradient(@top: #e8e8e8; @bottom: #ffffff; @topspread: 0px; @btmspread: 80px) {
  background-image: -webkit-linear-gradient(
  @top @topspread,
  @bottom @btmspread
  );
  background-image: -moz-linear-gradient(
  @top @topspread,
  @bottom @btmspread
  );
  background-image: -ms-linear-gradient(
  @top @topspread,
  @bottom @btmspread
  );
  background-image: -o-linear-gradient(
  @top @topspread,
  @bottom @btmspread
  );
  filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr=@{top}, endColorstr=@{bottom})";
}

So for each new brand, all that was left was to add the gradient values to their respective parameters, then go play some ping-pong in the basement. 

Even just using variables outside of a mixin context becomes a time saver. Each brand of course has their main brand color, but wait - what was the hex code for that again? Just assign it to any easily remembered variable.

Example: 

@mainbrand: #65a0c7;

Then in the global sheet

header { color: @mainbrand }

So not only did it remove the annoying hex code copy/paste lookup situation, once this was defined in the global sheet, all we had to do was change the value for @mainbrand and go play another round of ping-pong. 

Another feature that has proved to be quite beneficial is nesting - all I can say is awesome.

With a site that shares a lot of HTML in templates in slightly different contexts (tables, carousels, product info, etc.) nesting allowed for clear visualization of how these elements would be styled in different parent containers - as well as preventing style breaks on another part of the site when a selector that was not specific enough was used. 

Example:

#homepage {
  .product-name {
    font-size: @small-product-font-size;
  }
}

#product-page {
  .product-name {
    font-size: @large-product-font-size;
  }
}   


AND MOBILE - nested media queries? YES!

#product-page {
  media (max-width: 767px){
    .product-name {
      font-size: @large-product-font-size;
    }
  }
} 

 And these are just simple examples of how to leverage LESS. We also used less to speed up development of the mobile sites for Saucony and Sperry, both owned by Wolverine World Wide, which recently went through a remodel.

Here is an example of changing the value of a mixin to style the same HTML completely different. This example leverages nesting, so only the parent navigation container needs to be styled with mixin .header-top( )

For Saucony:

Saucony website on mobile phone

And Sperry:

Sperry website on mobile phone
So in summary, LESS saves time, is more programmatic (with functions, parameters, etc.) and comes with a really nice minifier that you can have run on compilation.

 

 

Continue Exploring

Approach

Culture

Careers

Our Work Services Commerce Cloud Approach Culture Blog Careers Contact

3344 Grand Ridge Drive NE
Grand Rapids, MI 49525
616 365 1000