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 that 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 syntaxes:

• 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 compatible with all versions of CSS.

Example:

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

Output:

 Though both Compass and SASS sound similar. There are significant differences between both. These are:

S.No	Compass	SASS
Definition	Compass is aan 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.	The 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.