Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Less
Less

1.6K
933
+ 1
925
Sass
Sass

11.6K
7.8K
+ 1
3K
Stylus
Stylus

323
232
+ 1
324

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.
Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Why do developers choose Less?
Why do developers choose Sass?
Why do developers choose Stylus?

Sign up to add, upvote and see more prosMake informed product decisions

    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?

        Sign up to get full access to all the companiesMake informed product decisions

        What tools integrate with Less?
        What tools integrate with Sass?
        What tools integrate with Stylus?

        Sign up to get full access to all the tool integrationsMake informed product decisions

        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.
        Animate.css
        It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
        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.
        See all alternatives
        Decisions about Less, Sass, and Stylus
        React
        React
        GraphQL
        GraphQL
        Apollo
        Apollo
        JavaScript
        JavaScript
        TypeScript
        TypeScript
        Webpack
        Webpack
        React Helmet
        React Helmet
        styled-components
        styled-components
        Sass
        Sass
        Less
        Less
        PostCSS
        PostCSS
        Bootstrap
        Bootstrap
        Semantic UI
        Semantic UI
        Foundation
        Foundation
        React Router
        React Router
        Koa
        Koa
        #JSX
        #React.
        #Css
        #StyledComponents.
        #Async
        #HTML
        #GraphQL
        #Apollo

        ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

        ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

        React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

        styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

        React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

        Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

        See more
        Hampton Catlin
        Hampton Catlin
        VP of Engineering at Rent The Runway · | 4 upvotes · 63.8K views
        atRent the RunwayRent the Runway
        Sass
        Sass
        PostCSS
        PostCSS
        styled-components
        styled-components

        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