CSS Preprocessors – Sass vs LESS

sass vs less

There are three primary CSS preprocessors on the market today, Sass, LESS, and Stylus. In this post, we will be comparing the two preprocessors which seem to be the most widely used among developers, Sass vs LESS. By switching to a preprocessor can help streamline your development process.

sass vs less logos

What is a CSS Preprocessor?

Writing CSS can become quite repetitive and little tasks such as having to look up hex color values, closing your tags, etc. can become time-consuming. And so that is where a preprocessor comes into play. A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.

Ashley Nolan polled developers in a recent case study to see which preprocessors they preferred. 689 people voted for Sass while LESS received 140 votes.

sass vs less poll

Source: 2015 Survey from ashleynolan.co.uk Disclaimer: these are just responses from a small portion of developers.

And if we take a look at Google Trends for “Sass” (programming language) and “LESS” (programming language) it appears there is much more activity with Sass.

Advantages to Using a Preprocessor

Once you have mastered CSS there are many advantages to using a preprocessor. One of the biggest is probably not having to repeat yourself. In other words, it makes your CSS Dry.

Here are some other advantages.

  1. Cleaner code with reusable pieces and variables
  2. Saves you time
  3. Easier to maintain code with snippets and libraries
  4. Calculations and logic
  5. More organized and easy to setup

Sass Vs LESS

Sass and LESS are both very powerful CSS extensions. You can think of them as more of a programming language designed to make CSS more maintainable, themeable, and extendable. Both Sass and LESS are backward compatible so you can easily convert your existing CSS files just by renaming the .css file extension to .less or .scss, respectively. LESS is JavaScript based and Sass is Ruby based.

Installation and Setup

There are a couple ways to install and get going with a preprocessor. You can either use a 3rd party application or you can install it from the command line.

3rd Party Applications

If you are just transitioning to preprocessors then we highly recommend using a 3rd party compiler as this will speed things up. Below is a list of some more popular ones, listed in no particular order.

sass less compiler

Source: Prepros

Compiler Sass Language Less Language Mac Windows
CodeKit      
Koala        
Hammer    
LiveReload        
Prepros        
Scout      
Crunch      

Perhaps you are more comfortable with a CLI, so here is how to install Sass and LESS.

Sass

To run Sass, you will need to have Ruby installed. On newer versions of Linux and OSX, Ruby already comes preinstalled. You can install Sass with the following command. sudo gem install sass

There are also other libraries, such as libSass which now bring Sass to NodeJS, without any need for Ruby.

On Windows, you will need to first install Ruby. If you are on a Mac, Ruby already comes preinstalled.

  1. Open up your terminal or command prompt
  2. Install Sass sudo gem install sass

LESS

LESS is written in javascript so you will need NodeJS to run it.

  1. On Linux and Mac, you can install it using the following command. npm install -g less
  2. You can then use this command to compile to CSS. lessc styles.less styles.css

On Windows you will need to install the NodeJS installer.

  1. Open up your command prompt
  2. Run npm install less
  3. You can then use this command to compile to CSS. lessc styles.less styles.css

Code Editor – Syntax Highlighting

After you have installed everything you then will probably want to setup a plugin or extension in your code editor to highlight Sass or LESS syntax with the proper colors. Here is a list of popular ones below, in no particular order.

syntax highlight less

Source: Github

Code Editor Sass Less
SublimeText Sass Bundle Less-sublime
Notepad++ Notepad-plus-plus Less-for-Notepad-plusplus
VisualStudio SassyStudio CSS is Less
TextMate SCSS.tmbundle Less.tmbundle
Eclipse Eclipse platform Eclipse for Less
Coda Coda Sass Coda 2 Less

There are also other popular 3rd party frameworks you can use along with the preprocessors such as Compass and Bourbon.

Variables

With preprocessors, you have the advantage over traditional CSS because you can use variables. You can store things like colors, fonts, or pretty much any value you want to reuse later. See examples below.

Sass Font Example

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
 font: 100% $font-stack;
 color: $primary-color;
}
CSS Output
body {
 font: 100% Helvetica, sans-serif;
 color: #333;
}

LESS Color Example

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
 color: @light-blue;
}
CSS Output
#header {
 color: #6c94be;
}

Mixins

Mixins are used to include a bunch of properties or group declarations together.

Sass Border Radius Example

In Sass, you use @mixin

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

.box { @include border-radius(10px); }
CSS Output
.box {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}

LESS Border Property Example

.bordered {
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

#menu a {
 color: #111;
 .bordered;
}

.post a {
 color: red;
 .bordered;
}
CSS Output
#menu a {
 color: #111;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

.post a {
 color: red;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

Nesting

Nesting is a huge advantage over CSS because it creates a visual hierarchy, similar to what you are used to with HTML. In the examples, you can see how there is less repetition of classes or divs needed since it is now in a cascade approach.

Sass

nav {
 ul {
 margin: 0;
 padding: 0;
 list-style: none;
 }

 li { display: inline-block; }

 a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
 }
}
CSS Output
nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

nav li {
 display: inline-block;
}

nav a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
}

LESS

#header {
 color: black;
 .navigation {
 font-size: 12px;
 }
 .logo {
 width: 300px;
 }
}
CSS Output
#header {
 color: black;
}
#header .navigation {
 font-size: 12px;
}
#header .logo {
 width: 300px;
}

Import

The standard CSS @import allows you to split into multiple files. The problem with this is that it creates additional HTTP requests. Sass and Less work a little different. Instead of creating another HTTP request, they combine the files into one. Similar to concatenation.

Sass

Let says you have a file named _sheet1.scss. In your base.scss you can include it at the top by using the following: @import 'sheet1'; There is no need to have the extension.

LESS

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

Extend

This is another powerful feature. It lets you share properties from one selector to another.

Sass

In Sass, you use @extend

.message {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}

.success {
 @extend .message;
 border-color: green;
}

.error {
 @extend .message;
 border-color: red;
}

.warning {
 @extend .message;
 border-color: yellow;
}
CSS Output
.message, .success, .error, .warning {
 border: 1px solid #cccccc;
 padding: 10px;
 color: #333;
}

.success {
 border-color: green;
}

.error {
 border-color: red;
}

.warning {
 border-color: yellow;
}

LESS

In LESS you use :extend

nav ul {
 &:extend(.inline);
 background: blue;
}
.inline {
 color: red;
}
CSS Output
nav ul {
 background: blue;
}
.inline,
nav ul {
 color: red;
}

Operations

Unlike with CSS, you can do all sorts of operations in both Sass and LESS.

Sass Grid Calculation Example

.container { width: 100%; }

article[role="main"] {
 float: left;
 width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
 float: right;
 width: 300px / 960px * 100%;
}
CSS Output
.container {
 width: 100%;
}

article[role="main"] {
 float: left;
 width: 62.5%;
}

aside[role="complimentary"] {
 float: right;
 width: 31.25%;
}

LESS Square Root Example

sqrt(18.6%)
CSS Output
4.312771730569565%;

Those are just a few of the benefits you get from using a preprocessor. Note: Most of the examples above were taken from the official Sass and LESS documentation.

Active Development

Both Sass and LESS are pretty active on Github, you can see some of the recent activity below.

Github activity Sass Less
# of open issues 138 208
# of pending pull requests 11 8
# of commits in the last 30 days 29 12

Summary

As you can see CSS preprocessors are very powerful and they can help streamline your development process, especially if you are coming from a programming background. While it appears that Sass is more widely used, there isn’t really a preprocessor that is better than the other. It usually comes down to the developer and what they are comfortable with using. Both of them have feature-rich extensions which can help make your CSS more maintainable, themeable, and extendable.

Which CSS preprocessor do you prefer? Let us know below in the comments.

Related Articles

CSS Preprocessors – Sass vs LESS was last modified: June 6th, 2017 by Brian Jackson
  • greystate

    LESS – probably because it was the first I heard of; I use CodeKit for the processing and I only really use variables, imports and nesting.

  • DracoBlue

    This:

    > To run Sass, you will need to have Ruby installed. On Linux, you can install it using the following command. sudo su -c “gem install sass”

    is actually not true anymore. There is also http://sass-lang.com/libsass officially supported, which brings sass to nodejs without any need for ruby.

    • Thanks, great catch. I have updated the article above to reflect the changes, also mentioned the libSass libary as well.

  • Matson, Gregory P.

    Thanks took forever to find the less and sass syntax highlighting

    • No problem, glad it was helpful. I don’t know how anyone could code efficiently without proper syntax highlighting. We tried to put together the best list that we could.

  • mksingh

    This tutorial really explain both preprocessor and both are backward compatible. here you can find more tutorial on http://www.discussdesk.com/what-all-you-need-to-know-about-sass-and-less-preprocessors.htm

  • emiliano87

    I’ve tried both codes and i can say that in a “challenge” LESS vs SASS, LESS win absolutely for some simply reasons:

    1 LESS do the same things in fewer time.

    I mean that SASS requires ruby installation (the first time, but this is not the problem) and EVERY TIME you need to open for some modification your SASS file you have to open your command line (and do what SASS requires to allow change your SASS file).

    With LESS you can modify your file whenever you want, with no command line limitations; simply (when you want to move from website to production version for example) at the end of your work you have to convert your .less file in a .css file (only one time in your project building) using Crunch software.

    2 More simplicity and no useless features

    I learned LESS faster than i do with SASS and honestly SASS has some useless features/procedures (the ouput formattation for example, the forced use of the command line) that only make you waste your time and slow down your developement.

    3 LESS has the nearly the same features that SASS has (and for sure has all the most important features, variables, mixins, nested just compare both extensions feature and you will know it) so using LESS you have all that you need.

    • Thanks for taking the time to comment! You have definitely made some really good points.

      • emiliano87

        Thank you!
        After some years of website development i noticed that simplicity is one of the best things in development (maybe the most important); that means “do what you need in the easiest way” (avoiding to learn, and use, useless stuff).That (simplicity) allow you to do more in less time and writing a more solid, clear and maintainable code; this explain why imho is Less better than Sass.

        • Joshua Austill

          After almost 30 years of trying to write code, I LIVE by simple is better 99% of the time. Great reasoning mate!

          • emiliano87

            Thanks!!

    • Nuno Bentes

      Totally agree. :) I use Less, and i don not plan to swith to SASS…

    • Wolfgang Mahlke

      this is wrong, you can compile sass with grunt, gulp or libsass, too… the definitely difference between the two frameworks is that less is based on javascript and sass on ruby but you can change on sass to libsass which is a port from sass on ruby to c libsass is used in gulp and nodejs

      Only the choice between the base if you would compile with a js compiler or with a c compiler is relevant and the usecases for the setup of your deploymanagement, server, projects for example

      sorry for my bad english guys

    • I strongly disagree that you have to compile every time in your command prompt. You can use the following command to watch for the changes in sass file. When there is any updates, it will automatically generate css for you.

      sass –watch ../my-project/css/sass/style.scss:style.css

    • Hitesh Kumar Sahu

      I picked LESS as soon as I heard I need to install Ruby. Installing ruby in secured ODCs means I will need to go through dozen of approval.

      • Dylan Hunt

        Except you don’t need Ruby because libsass…

  • Modulo m

    Both of these products are useless. It is a mistake to put logic into a css file. Many of the so called advantages of pre-processors can be solved or mitigated with a decent text editor. Additionally many other so called “powerful features” are ultimately meaningless and can be achieved easily with proper planning and structure of the application.

    • Thanks for your comment Modulo. I think it comes down to personal preference a lot of times. Some people prefer using a preprocessor while I know a lot who also don’t :)

    • Nuno Bentes

      You don´t put any logic in a css file. Your logic compiles to a css file.

      • Modulo m

        You’re an idiot.

    • Dan

      I don’t think you have a clue what your on about particularly given what you said about putting logic into css. Try managing hex codes, media queries, selector strings without a preprocessor with several developers across multiple projects without a preprocessor or employing different colour themes in the same stylesheet. I couldn’t imagine how God awful standard CSS would be these days given the complexity of some systems I’ve worked on. Sass keeps my work DRY and quick, go understand it (or less) before commenting..

    • Mangalore Cafe

      I think you are still design basic 5 page HTML website which may not have more than 30 lines of CSS code in the CSS file. Then you are right. A pre-processor is useless. Preprocessors come in handy for template makes when they need to make several color themes. One CSS file goes upto 1000 lines, and then you have to also take care fo responsive design and other if and else statements for browser compatibility if you think its a pre proccessor is not need you must be superman :-P (or you don’t have any idea what you are talking about like I said this is not for 5 page static html websites)

    • Let me guess: you also use emacs on a CRT monitor. Because you don’t need anything else.

      We know you can do all of this in straight CSS – because it will compile to straight CSS. The meaning we find in it is the time it saves and the way it alleviates maintenance.

  • SpEcHiDe

    i do not thing that you should run gem with “sudo”!!

  • jgermade

    I’m using Sass since LibSass (C/C++ Sass engine) has appeared. Is much faster than Ruby Sass and Less.
    My favourite combination is Sass + PostCSS (no more mixins for vendors prefixes)

  • I’ve extensively used both SASS and LESS, and I can unequivocally say that LESS works with my workflow best. It is simpler to use, quick to compile and less hassle :)

    SASS is certainly powerful, but I feel like there’s a lot of unnecessary complication in there. In fact, in order to inline SVG code I ended up having to write a ruby extension for SASS, whereas with LESS it supported escaping strings to URL-encoded versions in a single function, so that was most ideal. A specific use-case indeed, but one which I value.

    I don’t expect everyone to share my opinion, but I still feel that LESS’s simpler and more CSS-oriented syntax and well considered core features makes it easier to learn and quick to master. And seriously, that compilation time is really important!

    • optikool

      That seems odd, because a couple weeks ago I was converting a website that used images as part of the design and converted them all to SVG data attributes that could be used in SASS with no problem.

  • elmota

    LESS, you can re-use classes and rules without having to “extend” nor add the keyword “mixin” and guess what, if you put brackets to the selector, it becomes a mixin… you have no idea how much i relay on reusing classes without extending them in my code, I am bewildered as to why did Sass people ignored that feature! here is an example:

    my Html is quick and prototyped, I have small text

    my styles are tidier, i have a lot of rules that use “.small”

    so in Less, you have one entry:
    .small {font-size: 9px}

    re-use:
    .myclass{…
    .small;
    ….
    }

    in Sass you need two:
    @mixin small(){
    font-size:9px;
    }
    .small {
    @include small();
    }

    Reuse
    .myclass {…
    @include small();

    }

    LESS wins, did I miss anything? please enlighten me.

    • SASS:

      .small {
      font-size: 9px;
      }

      .myclass {
      @extend .small;
      }

      • elmota

        extending is not the same as re-using, extends already exists in LESS as &:extend (the main difference is about maintainability, the way your css comes out is different, and that is a personal choice)

        • optikool

          Also, @mixin small(){font-size:9px;} wouldn’t be included in your css, .small {font-size: 9px} would. And the @mixin looks more like a definition, where as .small looks like a normal style declaration. I can get confusing…

  • Prem Gupta

    sass

  • Prem Gupta

    very good

    • Prem Gupta

      love that..

    • Trupti Nagpure

      same here

  • Trupti Nagpure

    when we inspect the website in in developer tools which files extension will be showing in sass Like .css Or .SCSS ? please someone help me out.

    • It would be .css. In most situations you will see a developer process the less/sass files into a minified css and you won’t even know what they used. During dev you can load less directly and use a js parser to parse less at runtime but again this is mainly for dev purposes.

      A big part of using these preprocessors is that your dev work is faster. You have less code to go through to make changes and when you deploy you can get a nice minified file. If you weren’t using them then typically you are changing a very large css file and then using another tool to minify the output.

      • Erasmo Marín González

        also you can generate a sourcemap on development, that way you can see the source code files on the browser console

  • Jaredcheeda

    The link for Scout-App should be updated to Scout-App.io. Also it supports Linux.

    • Thanks, have updated the article to reflect this.

  • In “LESS Border Property Example” what is shown as the CSS output is actually continuation of the LESS code.

    .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }

    #menu a {
    color: #111;
    .bordered;
    }

    .post a {
    color: red;
    .bordered;
    }

    Generates CSS:

    #menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }

    .post a {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    }

    • You are right, thanks for that. I’ve updated the article.

      • optikool

        Doesn’t the following also get added to your css in LESS?
        .bordered {
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
        }

        where as SASS would not?
        %bordered {
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
        }

        This probably only matters if you are creating definitions like buttons or certain style definitions but you don’t want those definitions to appear in your styles…

  • fzzzt

    I’m adding CSS preprocessors to an existing project, haven’t used them before, and I gotta say, I’m pretty disappointed in sass because it’s entirely too opinionated. It converts HSLA into hex–which completely throws away the A (alpha) channel, breaking stuff. I don’t care about older browsers, I do care that the app works as intended, and sass prevents that by default. I can drop in less without worrying that my app broke, but with sass I will have to do a regression test to verify everything is correct.

    The only drawback I’ve found so far with less is that it uses @ as a variable character.

  • I prefer Stylus.

  • Rick Bergmann

    I have used LESS for 5 years. I recently discovered namespacing which is a game changer for me. How I write my CSS now is changing. LESS is declarative which is another benefit. Now I am grouping sets of styles (mixins) that I use regularly into classes. With the correct naming choice, calling the styles / functions is like reading English, basically replacing chunks of code with 1 line, and re-using them across multiple projects. All this in CSS-like syntax is great.

  • Brandon Franklin

    What can you do with SASS that you cannot do with LESS?

Shares
Share This

Share This

Share this post with your friends!