CSS Preprocessors: LESS and SASS

CSS is used to style content on a web page written in HTML, giving it a very nice look and it determines where content is displayed on the site. It also helps your website attract potential customers to your site.

But sometimes, using regular CSS to style larger and complex web pages can be a pain in the ass it’s error-prone; and it’s time-consuming. It causes us to move slowly and it makes it harder to maintain.

Another disadvantage of using regular CSS is that it works differently on different browsers. There might be cross-browser issues while using regular CSS. IE and Opera support CSS as different logic.

With CSS Preprocessors, it deals with compatibility issues with browsers by being compatible across different browsers. It makes the CSS structure easier to read and maintain. A CSS preprocessor is a scripting language that extends CSS and then compiles it back to regular CSS.

Goal

In this article, we will discuss two types of CSS preprocessors: LESS and SASS. we will discuss, differentiate and show the similarities between the two preprocessors.

What is LESS?

Less stands for Leaner Style Sheets. LESS is a dynamic preprocessor style sheet language that can be used on different browsers and can be compiled into Cascading Style Sheets (CSS) and run on the client-side or server-side. It is an open-source project and it was previously written in Ruby but now it's been replaced with JavaScript which makes it run on the client-side and complies with data very fast.

What is SASS?

SASS stands for Syntactically Awesome Style Sheet. SASS is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It is the superset of CSS and it is based on Ruby.
My friend Isaac stated SASS as

SASS is short for Syntactically Awesome Style Sheet. I know, I know, syntactically sounds like a lot no? Well, what it means is that the lines( syntax ) of SASS code are so awesome that it is known as CSS with superpowers. 😀

SASS consists of two syntaxes:

Original SASS syntax (indented syntax) - It uses indentation to separate code blocks.

button
    display: inline-flex
    background-color: #111
    color: #fff
    padding: 1em 2em
    border: none
    border-radius: 25px

The file extension is .sass

SCSS (sassy CSS) - It has the formatting of CSS, it uses braces to denote code blocks. The file extension is .scss

Similarities and Differences between LESS and SASS

Both LESS and SASS have similar features but what differs is the way they are written.

Variables

Both CSS preprocessors allow the use of variables in your stylesheet. Variables are one of the most commonly used items in any programming language. LESS and SASS allows the user to define a value once and reuse it throughout the entire stylesheet. Therefore, keep your code consistent and from repetition.

SASS declares variable with a dollar symbol ($)

$ff:  "Lato", sans-serif;
$p-color: #111;

// it can be applied anywhere in our stylesheet
body {
  font-family: $ff;
  color: $p-color;
}

LESS declare a variable with @ symbol

@ff:  "Lato", sans-serif;
@p-color: #111;

// it can be applied anywhere in our stylesheet
#header {
  font-family: $ff;
  color: $p-color;
}

Mathematical operator

They both provide support for some arithmetical operations. +, -, /,* can be used to operate on any number, color or variable. This saves a lot of time when you are using variables and you feel like working on simple mathematics.

SASS

$fontSize: 8px;
body {
   font-size: $fontSize * 2;
}

$big-screen: 1016px;
$small-screen: $big-screen / 2;

LESS

@fontSize: 8px;
body {
   font-size: @fontSize * 2;
}

@big-screen: 1016px;
@small-screen: @big-screen / 2;

Mixins

They support the use of Mixins. Mixins are used to create styles that can be used and reused anywhere in your stylesheet without recreating non-semantic classes.

In SASS a @mixin directive is used to define the mixin and @include is used to include mixin in a document.

.button {
  box-shadow: 0px 0px 3px 0 rgba(0,0,0,0.3)
  border-radius: 30px;
  transistion: transition: all 0.5s ease-in-out;
}

// to include mixin in any part of our stylsheet:
.cta {
  color: #111;
  @button;
}

LESS make use of . symbols both in defining and including them in our stylesheet and brackets at the end, just like how you call a function in javascript:

.button {
  box-shadow: 15px 5px 3px 0 rgba(0,0,0,0.3)
  border-radius: 30px;
  transistion: transition: all 0.5s ease-in-out;
}

.cta {
  color: #111;
  .button();
}

Mixins can also take arguments to enhance their utility, this is called PARAMETRIC MIXINS.

Examples of parametric mixins in SASS:

@mixin round-borders ($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

// And here’s how we can mix it into various rulesets:
.box {
  @include $round-borders(5px);
}

.button {
  @include $round-borders(30px);
}

LESS:

.round-borders (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

// And here’s how we can mix it into various rulesets:
.box {
  .round-borders(5px);
}

.button {
  .round-borders(30px);
}

Parametric mixins can also have default values for their parameters:

 @mixin round-borders ($radius: 5px) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

A mixin can also be used in another mixin, and it can also be used to return values. Mixins can store different values or parameters and call that function using @return.

Nesting

Nesting is the enclosure of one block of code inside another. It helps your code to be concise and it imitates the structure of your HTML. It also prevents us from rewriting selectors multiple times and makes your code easier to read and maintain.

header {
  color: black;
  nav {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

It is also possible to use pseudo-selectors with your mixins using this method.

.circle {
   width: 500px;
  height: 500px;
  position: relative;

  &:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    widht: 200px;
    background: yellow;
  }
}

NOTE: you can import predefine CSS preprocessor classes into other classes

Wrapping Up

In this article, we introduced and talked about two CSS preprocessors: LESS and SASS, their similarities and differences, and why you should start using it instead of regular CSS. They offer so much more, they allow you to use functions and conditional statements. Learn more about SASS and LESS .****