Less
Less

1.5K
924
14
Sass
Sass

10.4K
3K
1.7K
Stylus
Stylus

306
320
90

Sass vs. Less vs. Stylus - Help me Decide


CSS pre-processors are a truly enabling tool for front-end developers who would love to enhance their page styling through variables, mixins, mathematical functions, operational functions, nested syntax, and style-sheet modularization. They make it easy to automate repetitive styling, reduce errors and write reusable code while ensuring backward compatibility with various CSS versions.

In recent times, the three most popular and widely adopted CSS pre-processors are LESS, SASS, and Stylus. All three are designed to do similar things but expressed in a different syntax and sometimes carried out in different ways. Let’s do some comparison.

Design Philosophy

LESS

LESS (which stands for Leaner Style Sheets) is a backward-compatible language extension for CSS. LESS follows a declarative styling pattern by nature. This implies that you specify what you want to see not how you want it to be done. This is mostly as a result of its similarities to functional programming which mostly makes it more readable and easier to understand.

However, this also introduces some difficulty when implementing complex algorithm patterns. As the name implies, LESS is designed to enhance CSS in the leanest way possible with minimal extra features. These features are designed to intuitively follow regular CSS conventions, principles, and paradigms.

The official LESS documentation quotes “because LESS looks just like CSS, learning it is a breeze.”

SASS

SASS, which stands for Syntactically Awesome Style Sheets, was created by Hampton Catlin. It is equally designed to be compatible with all versions of CSS. It follows an imperative styling pattern which implies that you get to specify how things get done.

SASS has a wider range of functionalities and features that enable developers to do amazing things and implement very complex algorithms with lesser difficulty. However, this comes at the expense of maintaining a CSS-like look all-round.

At some point, it tends to feel a lot more like a programming language than a styling language and this makes it more difficult for people (e.g designers) without a programming background to quickly get up to speed with.

STYLUS

Stylus offers a bit more expressiveness while maintaining a much more concise syntax. People with Python backgrounds will very much resonate with its non-curly braced syntax of indentation. However, this is a purely optional feature and one could still stick to the regular CSS syntax.

It shares striking similarities with LESS, but it has an imperative syntax like SASS. Stylus thrives over SASS and LESS in its support of seamless mixins as shown below:

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

body
  font: 12px Helvetica, Arial, sans-serif

a.button {
  border-radius: 5px
  }

Syntax

All three pre-processors have their strengths and weaknesses.

LESS is pretty intuitive and more CSS-like.

SASS is more programmatic than it is CSS-like, although it supports all versions of CSS.

Stylus is more concise, intuitive and is just as programmatic as SASS. This is due to the fact that they are both imperatively styled.

All three pre-processors follow the Don’t-Repeat-Yourself (DRY) principle deeply and can perform conditional statements, functions, and operations.

Code Snippets

CSS

.conditional-example-1 {
  background-color: #000;
  color: #ddd;
}
.conditional-example-2 {
  background-color: #fff;
  color: #555;
}

LESS

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.conditional-example-1 {
  .mixin(#ddd)
}
.conditional-example-2 {
  .mixin(#555)
}

SASS

=mixin($a)
  @if lightness($a) >= 50%
    background-color: black
  @else if lightness($a) < 50%
    background-color: white
    color: $a;
.conditional-example-1
  +mixin(#ddd)
.conditional-example-2
  +mixin(#555)

STYLUS

mixin(a)
  if lightness(a) >= 50%
    background-color black
  else if lightness(a) < 50%
    background-color white
    color a
.conditional-example-1
  mixin(#ddd)
.conditional-example-2
  mixin(#555)

Learning Curve

When considering the learning curve for all three pre-processors, it would be biased to factor in the difficulty of setup with tools like Ruby for SASS and Node for stylus and LESS. This is due to the existence of applications like Codekit and Live Reload which make it easy to set up watchers and compilers for your code without requiring so much technical expertise with Ruby, NPM and the command line.

A more reasonable perspective will be that the only learning curve is in the syntax which holds different levels of difficulty depending on your background. Those with little or no programming experience would most likely find it easier to adapt to LESS than SASS and Stylus.

Inheritance

In writing CSS, there are times when you might want to apply the same styling to multiple elements at once as indicated below:

h1,
h2,
h3{
  /*Some styling here */
}

This brings into focus the “Cascading” attribute in the Cascading Style Sheets (CSS). As much as this works perfectly, things get a little messy and much more difficult to keep track of as the need to add individual styling to these elements increases.

SASS and Stylus enable us to efficiently address such concerns elegantly via the @extend syntax which imposes inheritance as shown below.

.header {
  padding: 2px;
  font-weight: bold;
}

h1 {
  @extend .header; /* Extends .header styles */
  font-size: 42px;
}
h2 {
  @extend .header; /* Extends .header styles */
  font-size: 36px;
}

This in-turn compiles to CSS in this form:

.header, h1, h2{
  padding: 2px;
  font-weight: bold;
}
h1 {
  font-size: 42px;
}
h2 {
  font-size: 36px;
}

In contrast, LESS has no direct support for inheriting styles like SASS and Stylus. A workaround, however, is to use selectors as properties which tend to handle them as mixins without arguments. So styles are imported in place of their selectors. This unfortunately mostly results in repeated styles in the compiled stylesheet. Here’s what it looks like:

.header {
  padding: 2px;
  font-weight: bold;
}

h1 {
  .header; /* Extends .header styles */
  font-size: 42px;
}
h2 {
  .header; /* Extends .header styles */
  font-size: 36px;
}

This in-turn compiles to:

.header{
  padding: 2px;
  font-weight: bold;
}
h1 {
  padding: 2px;
  font-weight: bold;
  font-size: 42px;
}
h2 {
  padding: 2px;
  font-weight: bold;
  font-size: 36px;
}

Working with Media Queries

A good number of CSS developers are already quite familiar with adding @media at the bottom of their stylesheets to target and specify styling modifications for various screens. However, going this route could create a sort of disconnection between the original styling and the specified style for alternate screens especially with larger projects.

SASS and LESS enable us to take advantage of nesting, to keep all the styling for a particular section together irrespective of what kind of devices is targeted. An example is shown below:

.special-class {
  /* special class styles */

  @media (max-width: 800px) {
    /* Responsive styling for special class */
  }
}

Stylus also provides a similar way to do this. Observe the following syntax below:

.special-class
  /* special class styles */

  @media screen and (min-width: 600px)
    /* Responsive styling for special class */
<

Error Reporting

If you’re like me, you definitely can recall a time when you spent several hours trying to figure out what was wrong with your styling. Perhaps you got to find it after all and realized that the error had been staring at you silently the whole time.

With these pre-processors, you can get error reports as your authored files get compiled. They will tell you if there’s something wrong with your code, where and sometimes, why.

Website & Documentation

Stylus and LESS have a somewhat simpler and intuitive design on their website than SASS.

Although SASS keeps a pretty robust documentation, LESS and Stylus tend to do a better job in going straight to the point, helping developers keep up to speed quickly and locate resources faster.

Conclusion

All three CSS pre-processors considered in this article are mostly capable of the same things at their core and really just go about implementation and syntax differently. They have their areas of excellence and those of weakness. The choice of which to use is mostly situational and dependent on the requirements of the project in question.

SASS and Stylus are mostly programmatic in nature and permit advanced logic and algorithms. They allow us to write custom functions.

SASS has the largest adoption, an active community; popular front-end frameworks like Angular, Vue and React use it too.

Stylus has a highly concise and flexible syntax and easily integrates with Node projects.

Although LESS has the fewest features and logic-based functionality, it compiles very easily on the front-end hence it thrives on serverless architectures. It also has several built-in functions to complement its flaws.

Further Reading:

Here are some extra topics and links to guide you as you make your decision:

Less vs Sass vs Stylus: What are the differences?

CSS preprocessors help produce CSS that works in browsers. They help build cool inventive features to CSS with the use of variables, mixins, nesting and extending.

Less – One of the best user base for CSS, it extends the dynamic behavior such as variables, mixins, operations, and functions. It runs on both the server-side or client side. Less is written in JavaScript and required NodeJs. It allows modification of files at any time. Is easier to learn and has almost the same features as Sass. Sass – Syntactically Awesome Style Sheet or Sass is a mature, stable, and powerful. Compatible with all versions of CSS to seamlessly use any available CSS libraries. Compass, Bourbon, and Susy are some popular frameworks built using Sass. Sass follows the DRY principle to avoid duplication. Sass is an extension of CSS3 and is translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Stylus –has been a revolutionary new language that provides an efficient, expressive and dynamic way to generate CSS. This supports both an indented syntax and regular CSS style. Setting up Stylus is much easier once you have Node.js. You receive the binaries for the platform and ensure they include the npm, Node’s package manager.

- No public GitHub repository available -

What is Less?

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

What is Sass?

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

What is Stylus?

Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Want advice about which of these to choose?Ask the StackShare community!

Why do developers choose Less?
Why do developers choose Sass?
Why do developers choose Stylus?
What are the cons of using Less?
What are the cons of using Sass?
What are the cons of using Stylus?
    Be the first to leave a con
      Be the first to leave a con
        Be the first to leave a con
        What companies use Less?
        What companies use Sass?
        What companies use Stylus?
        What are some alternatives to Less, Sass, and Stylus?
        CSS 3
        CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future.
        PostCSS
        PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
        Compass
        The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions.
        Bourbon
        Bourbon is a library of pure sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.
        CSS Modules
        It is a CSS file in which all class names and animation names are scoped locally by default. The key words here are scoped locally. With this, your CSS class names become similar to local variables in JavaScript. It goes into the compiler, and CSS comes out the other side.
        See all alternatives
        What tools integrate with Less?
        What tools integrate with Sass?
        What tools integrate with Stylus?
          No integrations found
            No integrations found
            Decisions about Less, Sass, and Stylus
            Hampton Catlin
            Hampton Catlin
            VP of Engineering at Rent The Runway · | 4 upvotes · 31.2K views
            atRent the RunwayRent the Runway
            styled-components
            PostCSS
            Sass

            We use Sass because I invented it! No, that's not a joke at all! Well, let me explain. So, we used Sass before I started at Rent the Runway because it's the de-facto industry standard for pre-compiled and pre-processed CSS. We do also use PostCSS for stuff like vendor prefixing and various transformations, but Sass (specifically SCSS) is the main developer-focused language for describing our styling. Some internal apps use styled-components and @Aphrodite, but our main website is allllll Sassy. Oh, but the non-joking part is the inventing part. /shrug

            See more
            Interest over time
            Reviews of Less, Sass, and Stylus
            Review ofStylusStylus

            One of the main reasons I use it is that it combines most of what I like but is spread across other preprocessors.

            The option to make functions that take places of properties is amazing. ie. border-radius: "child" $parent-radius can actually be calling a function like border-radius("child", $parent-radius) where using border-radius: 4px would just implement the standard expected result.

            Add in my favorite selector: `^[-1..-1] to get the last raw selector in a nested situation. (its like magic in combination with BEM naming syntax)

            Review ofLessLess

            Absolutely fantastic, not only does it allow for modularity but it is armed with the most useful features like colour operations and nested styles to make you achive more by writing LESS.

            How developers use Less, Sass, and Stylus
            Avatar of Kevin Ard
            Kevin Ard uses SassSass

            It was a little awkward building BS3 with LESS, and the rest of the site with SCSS, but it works. SCSS made building the UI elements (ink/flip buttons, img navs, etc) a breeze. It also drives the mobile menu open/close transitions - that would have been much too much with vanilla css.

            Avatar of Climate CoLab
            Climate CoLab uses SassSass

            Sass helps us write better stylesheets. One major improvement over CSS that we use a lot is variables - it allows for much easier theming to quickly change brand colors for new instances of the xCoLab.

            Avatar of Ujjwal Bhujel
            Ujjwal Bhujel uses SassSass

            When you realise that countless lines of CSS codes could be made countable. And off course, a wonderful and cool way to use the logic behind variables and nesting. Simply love it.

            Avatar of Scrayos UG (haftungsbeschränkt)
            Scrayos UG (haftungsbeschränkt) uses SassSass

            Sass is used as a part of Woltlab Suite Core, which offers to submit/configure own styles via the injection of own Sass-CSS. So we exclusively rely on Sass for our CSS needs.

            Avatar of Refractal
            Refractal uses SassSass

            CSS is a mess. There, we said it. Sass, on the other hand takes CSS and makes it pretty, easy to work with and has stuff like variables which make things seriously awesome.

            Avatar of papaver
            papaver uses LessLess

            love me some less. been less styling for around 3 years. makes working with bootstrap and responsive website a breeze. so much power in the language.

            Avatar of Romans Malinovskis
            Romans Malinovskis uses LessLess
            Avatar of Giovanni Candido da Silva
            Giovanni Candido da Silva uses LessLess

            Customise the UIkit Front-End Framework, because of that is used to create the application CSS. I prefer SASS but is equivalent.

            Avatar of BrizTech Ltd.
            BrizTech Ltd. uses LessLess

            CSS Preprocessor, used primarily for variables to ensure brand colour continuity.

            Avatar of CodeBee
            CodeBee uses LessLess

            We use Less to organize our CSS code with imports, variables, mixins, and more.

            Avatar of LapNghiep
            LapNghiep uses StylusStylus

            Accompanied with ReactJS code

            Avatar of Thomas Hunsaker
            Thomas Hunsaker uses StylusStylus

            I hate CSS.

            How much does Less cost?
            How much does Sass cost?
            How much does Stylus cost?
            Pricing unavailable
            Pricing unavailable
            Pricing unavailable
            News about Less
            More news