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!
Top comments (2)
Totally not what I was expecting, as less is not more
That's fair! I'm confused by that a little too as the installation for LESS uses
lessc
andman less
is not at all the same. LESS instead haslessc -h
which isn't as nice.