DEV Community

Michael
Michael

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
hwolfe71 profile image
Herb Wolfe

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

Collapse
 
emgodev profile image
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.