Difference between SASS and SCSS

CSS preprocessors

CSS is the standard implementation of the styling component of web pages by the WWWC and all browsers.A CSS preprocessor is a program that allows you to generate CSS from the preprocessor's own unique syntax. CSS preprocessor make it more useful, productive and writing stable code.

we have to install preprocessor compiler on your web server before using CSS preprocessor.

There are many CSS preprocessors available. Most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

Moreover, SASS is a CSS preprocessor with syntax advancements. Style sheets in the advanced syntax are processed by the program and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

Common options of CSS preprocessors are given below:

• Sass
• Less.js
• Stylus
• CSS-Crush
• Myth
• Rework

Difference between SASS and SCSS

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax. It makes use of semicolons and brackets like CSS (Cascaded Style Sheets).SASS and SCSS can import each other. Sass actually makes CSS more powerful with math and variable support.

• SASS is used when we need a original syntax, code syntax is not required for SCSS.
• SASS follows strict indentation, SCSS has no strict indentation.
• SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS style and use of semicolons and braces are mandatory.
• SAAS file extension is .sass and SCSS file extension is .scss.
• SASS has more developer community and support than SCSS.

It is common to confuse with the options available in CSS preprocessors, SASS is a preprocessor that has a lot of features to make styling quicker and more efficient and SCSS is another pre-processor but kind of the middle ground between Sass and CSS. The difference is in the syntax. Don't confuse with the .scss and .sass, both of them are SASS and SCSS options. .scss is Sassy CSS and is the next generation of .sass.

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, called as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

To understand the difference between SASS AND SCSS, we have to learn the different syntax between them.

SASS

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

• The code above we use ; to separate the declarations.added all the declarations for .border onto a single line to illustrate this point further.
• In contrast, the SASS code below must be on different lines with indentation and there is no use of the ;. sass have no strict indentation,sass syntax is similar to ruby

 

SCSS

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
 border-color: $blue;
 color: darken($blue, 9%);
}

.border {
 padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

The SCSS style is a lot more similar to regular CSS than the older SASS approach

The corresponding css code given below:

CSS

/* CSS */

.content-navigation {
 border-color: #3bbfce;
 color: #2b9eab;
}

.border {
 padding: 8px;
 margin: 8px;
 border-color: #3bbfce;
}

Other common differences are here:

• Assignment sign in sass is = instead of : in scss
• Variable sign in sass is ! instead of $ in scss

example:

// SASS Variable decleration and assignment
!primary-color= hotpink

// SCSS Variable decleration and assignment
$primary-color: hotpink;

In short, hope you understood the comparison of css preprocessors.