Skip to content
Related Articles

Related Articles

What is the difference between Compass and SASS ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 23 Dec, 2019

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.


@mixin bordered($color, $width) {
  border: $width solid $color;
.myBook {
  @include bordered(blue, 2px); 
.myStudy {
  @include bordered(red, 3px);


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.


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


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

DefinitionCompass 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.
NeedNo vendor prefix in CSS.Presence of variables is stated as the key factor.
SimplicityCompass mixing make CSS3 quite easy without much complexity.SASS provides a well formatted CSS. This makes it easier to organised and maintain.
ApprovalCompass has comparatively less approval in companies than SASS.SASS has more approvals with about 2098 company stacks.
UsageCompanies such as Weebly and Movielala use Compass.Pandora, Square and Airbnb use SASS.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!