What is the difference between Compass and SASS ?

Compass: Compass is a stylesheet distribution framework. It is written in Ruby and was mainly developed to fix the shortcomings prevailing in CSS. Compass comes with a robust authoring environment which means, the code we develop is auto monitored and is later compiled for usage in pure CSS form. Compass makes use of SASS.

Features of Compass:

  • SASS style nesting enabled by CSS rules.
  • In-built functions for the usage of images, colors, fonts and expressions.
  • Helps to create beautiful typographical rhythms.
  • Helps to download and create extensions in a much simpler manner.

Example:

@import"compass/utilities/color/contrast";
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myBook {
  @include bordered(blue, 2px); 
}
.myStudy {
  @include bordered(red, 3px);
}

Output:

SASS: SASS stands for Syntactically Awesome Style Sheets. It is merely an extension of CSS which enables us to make use of variables, inline imports, nested loops and many more. SASS is generally interpreted into Cascading Style Sheets. SASS uses two syntax:



  • The intended syntax
  • Sassy CSS

Features of SASS:

  • SASS allows variables to be defined within.
  • SASS supports interpolation i.e. you can define an element in a variable and later interpolate it in the SASS code.
  • SASS holds several inbuilt functions. Present functions are related to colors, fonts and expressions.
  • SASS is compatibles with all the versions of CSS.

Example:

$bgcolor: blue;
$primary-color: #212; 
body { 
  background-color: $bgcolor
  color: $primary-color; 
}

Output:

Though both Compass and SASS sounds similar. There are significant difference between both. These are:

S.No Compass SASS
Definition Compass is an SASS library holding the raw code with additional inbuilt functions. SASS is merely and extension of CSS3 which includes variables, loops, selector inheritance and many more.
Need No vendor prefix in CSS. Presence of variables is stated as the key factor.
Simplicity Compass mixing make CSS3 quite easy without much complexity. SASS provides a well formatted CSS. This makes it easier to organised and maintain.
Approval Compass has comparatively less approval in companies than SASS. SASS has more approvals with about 2098 company stacks.
Usage Companies such as Weebly and Movielala use Compass. Pandora, Square and Airbnb use SASS.
My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.