Open In App
Related Articles

What is the difference between Compass and SASS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.NoCompassSASS
DefinitionCompass 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.
NeedNo vendor prefix in CSS.The 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.

Last Updated : 03 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads