Here’s the Deal

Foundation vs Sass

186 80

286 24

When comparing Foundation vs Sass, the Slant community recommends Sass for most people. In the question“What are the best web design tools?” Sass is ranked 3rd while Foundation is ranked 11th. 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

Common Questions

What are the best web design tools?

Pros

Pro
Responsive design philosophy

Foundation allows designing for multiple screen sizes simultaneously easily, meaning your content will always fit.

Pro
Uses REMs instead of pixels

Foundation uses REMs instead of pixels, meaning you don't have to state an explicit height, width, padding, etc, for every device. Simply put, using REMs means you can just state font-size: 80%; and have the whole component (and its nested elements) shrink by 20%.

This is great for making your site mobile friendly. There is also a Sass function in Zurb that converts pixels to REMs so if you're used to thinking in pixels, you don't have to learn a different system.

Pro
No style lock-in

Styles are purposefully undeveloped to encourage differentiation between different sites using Foundation.

Pro
Block grid

Foundation has a feature called block grid. Block grid gives designers the power to divide the contents of an unordered list into a grid that is evenly spaced. Furthermore, Foundation also takes care of collapsing columns as well as removing gutters.

Pro
Easy customization

Just by looking at the name, Foundation merely provides designers with a foundation of sorts on which they can build their design. It can be customized easily through SASS, a powerful CSS pre-processor or by overriding the default CSS styles.

Pro
Easily extensible with a selection of add-ons

There's a variety of front-end templates, icon fonts, responsive table examples, SVG icons and stencils that help you quick-start or easily improve on your site.

Pro
Support for off-canvas navigation

Foundation comes with an easy way of creating off-canvas menus.

Pro
Uses Interchange to load responsive content

Foundation comes with Interchange, it makes use of media queries to load images responsively and create content that's suited to different browsers and devices.

Pro
RTL support

Allows easily changing text direction.

<html class="no-js" lang="ar" dir="rtl">

Pro
Built-in form validation

Foundation comes with Abide plugin, an HTML5 form validation library.

Pro
Good mobile support

Foundation was one of the first frameworks to adopt a mobile-first philosophy. By focusing on mobile design first, Foundation makes designers think on what kind of content is important, relevant and interesting to the users without thinking too much on the space.

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
Extends CSS maintaining compatibility with CSS standards specification

It comes with two possible syntaxes:

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
Easy to learn

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

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.

This:

div {
    background-image: -webkit-linear-gradient(#F00, #000);
    background-image: -moz-linear-gradient(#F00, #000);
    background-image: -o-linear-gradient(#F00, #000);
    background-image: linear-gradient(#F00, #000);
   }

Can be written as:

.gradient {
    @include background-image(linear-gradient(#F00, #000));
}

For a full list of features, check out the Compass documentation.

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
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
New sass package means you no longer need external dependencies

The latest implementation of Sass is written in Dart, and compiles to pure JS with no native code or external dependencies, means you no longer need Ruby or libSass.

Pro
Easy to use with ruby apps

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

Ad
Cons

Con
Can be hard for beginners to grasp

Since Foundation is built to be customizable, it's default style may not be very appealing for most. While it's true that most production-ready websites shouldn't be using the default style of a css framework (they would all end up looking the same), this is even more true for Foundation.

Con
Needs more pre-built components

Example would be a scroll-spy not only for one cell, but cell to cell.

Con
Not UMD pattern in core

This problem will bring attention when used with Angular, React and other JS framework. It is important to know that they create app version of this framework.

Con
Documentation is a bit better than average

Documentation could be written better and clearer, with many more example than they currently have. Sometimes hard to find solutions for detailed css problems.