When comparing Sass vs cssnext, the Slant community recommends Sass for most people. In the question“What are the best CSS preprocessors/postprocessors?”Sass is ranked 1st while cssnext is ranked 5th. The most important reason people chose Sass is:

You are able to declare custom functions with Sass (for example, converting units) which can be easily invoked, even when using shorthand properties. This results in cleaner, more reusable code.

Ranked in these QuestionsQuestion Ranking

Pros

Pro

Powerful advanced function features

You are able to declare custom functions with Sass (for example, converting units) which can be easily invoked, even when using shorthand properties. This results in cleaner, more reusable code.

Pro

Nested selectors

Sass allows you to nest selectors which results in code that is both faster to write and cleaner to read.

For example, this:

.parent
color: blue
.child
color: yellow

Will compile to this:

.parent {
color: blue;
}
.parent .child {
color: yellow;
}

Pro

Rapid development

Another big advantage for Sass is the very active community pushing the development forward at a rapid pace. Sass is constantly coming out with bug fixes, and are often the first to come out with improvements.

This is an important factor to keep in mind when picking a preprocessor to invest your time into.

Pro

Sass - No parens or semicolons allowed and the nesting is dictated with whitespace.

SCSS - SCSS syntax is a superset of CSS – which means SCSS can be written as CSS, but has been expanded to include the features of Sass as well.

SCSS is easier to pick up for beginners and Sass has a cleaner syntax. Having both syntaxes means you can pick the one that best suits your coding style.

The mandatory syntax rules for both SCSS and Sass results in a more consistent code. For a more detailed analysis between Sass and SCSS go here. To see a nice comparison of the Sass syntax against CSS and SCSS go here.

Pro

Output minified CSS

Sass simplifies minifying CSS files by offering a one-line command that will output a minified version.

Pro

Libsass - C/C++ port of Sass

There is also a C/C++ port of the Sass CSS precompiler called Libsass that decouples Sass from Ruby. It is very fast, portable and easy to build and integrate with a variety of platforms and languages.

Pro

Source maps support

Rather than being limited to editing the outputted CSS file in devtools, with source maps you are able to manipulate the original .scss file.

Pro

Compass framework provides added features

Sass can be used with a framework called Compass, which provides additional functions and mixins which can reduce the amount of code you have to write.For example, Compass will take care of vendor prefixes.

Pro

Easy to learn

It's very comfortable and easy to write/learn Sass, even for beginners.

Pro

Easy to use with ruby apps

Since it's written in Ruby, it's easier and faster to use with Ruby apps.

Pro

Built on PostCSS

cssnext is a PostCSS plugin, which makes it pretty easy to use for people who are already using PostCSS.

Pro

JavaScript-based

Because the parser/compiler can function in a web browser, it can be used with systems that cannot run similar technology on the server. For example, you could build a WordPress plugin with a front-end application that transforms CSS.

Pro

No need to learn a new syntax

Since css-next only adds new CSS features in a way that all browsers can support it, it's still CSS. So there's no need to learn any new syntax.

Ad

Cons

Con

Requires Ruby or libSass

To compile Sass, it needs either Ruby or libSass installed locally.

Con

Noisy syntax

There is many unnecessary characters when using the SCSS syntax.

{}:;@

However using the Sass syntax eliminates them.

Con

Lack of support in IDEs

Currently there is very little support for syntax highlighting when writing PostCSS plugins.

Alternative Products

Each month, over 2.8 million people use Slant to find the best products and share their knowledge. Pick the tags you’re passionate about to get a personalized feed and begin contributing your knowledge.