LESS Really is More

The other day I got around to using LESS which, admittedly, I had no idea was not some component of SASS/SCSS. I am now loving it. If you've used SASS maybe you know why? Or maybe I have no idea how to use SASS?

A few things about SASS

For example SASS uses keywords heavily, and odd symbols, that do not mesh well with the front-end syntax.

A variable is prefixed with a '$', other than that it is similar to LESS and JS.

$text-color: #06f;

If you want to share the declarations of another ruleset (class, element, id) you use the 'extend' keyword or a mixin which is like a function; Mixins use the 'include' keyword.

@mixin easyFlexContainer( $type, $flow, $justify, $items, $content ){
  display: $type;
  flex-flow: $flow;
  justify-content: $justify;
  align-items: $items;
  align-content: $content;
}

.ulIsAnnoyingNavElement {
  padding: 0em;
  margin: 0em;
}

.main-nav {
  ul {
    extend .ulIsAnnoyingNavElement;

    include easyFlexContainer(flex, row wrap, flex-start, center, flex-start);
  }
}

Don't get me wrong, this is all fine and you can get used to it, but a simple comparison will hopefully explain why I think LESS is so much better.

How is LESS awesome (in my opinion)?

Only looking at a few different components of SASS should give you a general idea of what to expect. Here is how LESS differs. LESS boils a lot of prefixes down to two things, LESS prefixes use '@', and less constructs are functions.

What I mean by less 'constructs' are 'functions' is that you can think of things in LESS as literally usable functions, no need for magic keywords, just use it!

@text-color: pink;

.makeItPretty {
  padding: 0em;
  margin: 0em;
}

.easyFlexContainer( @type, @flow, @justify, @items, @content ){
  display: @type;
  flex-flow: @flow;
  justify-content: @justify;
  align-items: @items;
  align-content: @content;
}

/* Client Ruleset */
.main-nav
  ul {
    .makeItPretty();
    .easyFlexContainer(flex, row wrap, flex-start, center, flex-start);
  }
}

Yup that's all I wanted to share. LESS is pretty amazing, treating classes as functions and mixins, or when not using '()', just classes!

Comments

[Herb Wolfe]

Totally not what I was expecting, as less is not more

[Michael]

That's fair! I'm confused by that a little too as the installation for LESS uses lessc and man less is not at all the same. LESS instead has lessc -h which isn't as nice.