Sass and Less Quick introduction Tutorial

In this article I would like to show you some basics infos I find useful in the process of mastering Less, Sass and CSS itself. Take a moment to read it.

Less Sass CSS Quick Tutorial

This is absolutely not an exahustive tutorial, but you may find it interesting to begin with. You will learn a lot by practicing these tips.

The first thing you should do is to install Node.js, in that these tools are mainly distributed as Npm packages and this is the way I think it’s more straightforward to start with.

To do that, go to the node installation page and download your preferred OS’ distribuition, it will be easy to install it onto your machine.

Once you’ve done that follow these steps to install our Npm packages and get Less and Sass properly working:

C:\Users\benedict>node -v
C:\Users\benedict>npm -v
C:\Users\benedict>npm install -g less
C:\Users\benedict>npm install -g sass

The first two lines will show you the current version of Node.js and Npm, in that you wanna make sure everything is installed alright on your computer.

The last two lines will install Less and Sass globally on your computer, via the Node package manager a.k.a. Npm.

In order to continue with this tutorial you better have installed a smart and modern editor which supports Less and Sass syntax, like Visual Studio Code.

Less and Sass are both extensions of CSS and they share a lot of carachteristics in that they are both pre-processors, i.e. they’re open source scripting languages that compile into CSS and add dynamic features to it.

They’re both cross browser compatible and can also be run on the browser without compiling, through a JavaScript interpreter.

They’re easy to use, the only thing you should do in order to compile source code to CSS, is to run one of the two respective commands at your shell:

C:\Users\benedict>lessc style.less style.css
C:\Users\benedict>sass style.scss style.css

For the sake of simplicity the tutorial snippets will be based on Sass, you will find the equivalent Less code on this GitHub repository.

Sass is older compared to Less and has many consolidated features that with Less are taken for granted, they both promote DRY code, code reuse and dynamic style of coding, like any other programming language. Our code will be short, well organized and maintainable.

But let’s begin with the first feature when it comes to Sass, the use of variables:

$primarycolor: orange;
$secondaycolor: grey;

h1 {
   color: $primarycolor;
}

h2 {
   color: $secondaycolor;
}

This code is self-explanatory, variables are used to reuse values around the entire stylesheet. The second feature I wanted to show you is nesting:

nav {
    ul {
      margin: 5px;
      padding: 5px;
      list-style: none;
    }
    li {
      display: inline-block;
    }
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
}

Again, it is quite simple. Like in our html document DOM’s, we have several level of nesting, which is reflected in our stylesheet. Another useful feature is mixins:

@mixin success-text {
    color: white;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

.success-message {
    @include success-text;
    background-color: grey;
}

In this case we have the possibility to reuse portions of code which we call mixins and get them working around the entire stylesheet. A similar feature is extensions, which sematically is similar in that it promotes code reuse, but logically it is a bit more of an inheritance:

.button-basic  {
    border: none;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
}
  
.button-reject  {
    @extend .button-basic;
    background-color: red;
    color: yellow;
}
  
.button-approve  {
    @extend .button-basic;
    background-color: green;
    color: white;
}

And last but not least, we have imports, which allow us to include portions of code coming from other files. Instead of opening new http requests for many CSS, all files will be compiled into a single one.

@import "reset";

This statement will include a reset.scss file under the same folder. Many other features are present both in Sass as well as in Less. They varies from conditionals statements to iterative loops, as well as functions. Just quite all the other programming languages.

To get more knowledge and understanding of this kind of interesting tools, please keep browsing the web at websites like the locations I advice you below: Tutorials Point for Sass, and Tutorials Point for Less.

The GitHub for the Less code is mentioned above, do have the patience to evaluate the code repository. For now we have finished, keep coding and see you soon.

Did you like this post? Please, share it on your preferred social networks, thank you! Do you like the way I write code? Hire me! You will find all the contact details on the link above.