Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

LESS Tips & Tricks

Published on January 5, 2012
Last Updated on August 16, 2018
Application Development

By now you have probably heard of LESS (or SASS). CSS pre-processors have been around for quite some time now. Even I was slow to adopt a CSS pre-processor solution for my projects, and I can’t quite put my finger on why that is. Perhaps I felt that CSS was simple enough to not need any additional processing power. Or perhaps I felt I knew everything there is to know about CSS, so why should I need a crutch? It wasn’t until recently that I started using LESS on all of my projects — and I’m glad that I did.

Why CSS is limited

  • No nesting capability, therefore reading long strings of CSS can become difficult and time consuming.
  • No re-usability. You cannot globaly change any particular style unless you do a manual find/replace.
  • No mathematical operators for quickly calculating anything from margins & padding to font-size and colors.

Diving In

As a Front-End developer, I work with CSS a lot. One of the more frustrating things about CSS is in general, the more specific the rule, the longer the line of CSS will be. Of course there are ways around what I’m about to write, but in standard CSS it would not be uncommon to see something like this:

#main {
  background: #fff;
}

#main #blog {
  margin: 10px 5px;
}

#main #blog .entry-content {
  margin: 20px;
}

#main #blog .entry-content p {
  line-height: 20px;
}

#main #blog .entry-content p.opener {
  font-weight: bold;
}

That’s 18 lines, including spaces. But we don’t really care about lines numbers in our uncompressed CSS. We care about readability, and how quickly we can navigate and locate a specific style [more on this later].

In LESS, I’d write the same CSS like this:

#main {
  background: #fff;
  #blog {
    margin: 10px 5px;
    .entry-content {
      margin: 20px;
      p {
       line-height: 20px;
        &.opener {
          font-weight: bold;
         }
      }
   }
  }
}

Couple of advantages here. If you only used LESS for straight formatting, which I sometimes do, you gain several advantages.

  • It’s faster to write CSS when you don’t have to repeat extremely long chains.
  • Visualizing your cascading styles (we are working with Cascading Stylsheets afterall) is much easier when you actually can visually see them cascade and nest.

Using the & operator will output the CSS:

p.opener { font-weight: bold; }

If you removed the &, you would get an additional class not specific to the tag.

p .opener { font-weight: bold; }

Use LESS for :pseudo-classes

Another  quick trick is that you can use the & operator to act on :hover, :active,  and any other pseudo-attribute including the new CSS3 spec like :nth-child or :last-child.

a {
  &:hover { color: red; }
  &:active { color: blue }
}

Use CodeKit

LESS isn’t a language that browsers can compile without Javascript, so I’ve been using an app called CodeKit. From the developers mouth:

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that’s just the first paragraph.

Yep, it automatically watches and compiles our LESS files. Very nice indeed. I’ve also used it for JSLint validation on my Javascript. Setup is dead simple. Add the folder in which your project lives, and CodeKit will find all of the files it can handle and work it’s magic. CodeKit will also output our CSS in compressed (no line breaks) format for us.

Another advantage using CodeKit is that since LESS is compiled, it needs to be syntactically correct. No more hanging semi-colons or double ## laying around in your code anymore!

Download CodeKit here: http://incident57.com/codekit/

LESS is MORE!

One of the great things about LESS are variables and mixins. When you develop, you’ll notice that you begin to write repetitive CSS, especially when working with CSS3 properties like border-radius and box-shadow. Here’s a couple resources to bootstrap LESS and add in functionality that you can start using right off the bat.

  • LESS Elements (http://lesselements.com/)
  • Preboot (http://markdotto.com/bootstrap/)

Don’t overnest

As I mentioned earlier, one of the best features of LESS is the ability to nest rules. However, it’s important to keep in mind that you do not want to overnest. Here’s a good example:

nav {
  ul {
    li {
      a {
        ...
      }
    }
  }
}

Nesting with LESS isn’t really a LESS problem, but inherintly it’s a CSS problem. Find the balance between nesting for convenience, and nesting for function.

header {
  ul { ... }
  li { ... }
  a { ... }
}

Additional Resources

  • How to Build a Responsive Frankenstein Framework With LESS
  • Run LESS with Node.js
  • LESS Github

Wrapping Up

Whether or not you use all of LESS’ features, or only a few, I think its worth giving it a shot on your next project. Using LESS is less about improving your CSS knowledge, and more about being more efficient when writing CSS. Once you start to write with LESS, you’ll begin to wonder why you waited so long.

Posted in Application Development
Share this

Dave Ackerman

Follow

Related Posts

  • JS Performance Tips and Tricks
    JavaScript Performance Tips & Tricks

    Some say spending time developing for performance is not worth it when hardware upgrades are…

  • Tip and Tricks for a Successful Interview
    Tip and Tricks for a Successful Interview

    Is the forgotten New Years resolution coming to haunt you? Maybe it is the winter…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
IT modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Our story
    • Careers
  • Let’s talk
  • EN
  • FR