What's the difference between SCSS and Sass?

Question

From what I\'ve been reading, Sass is a language that makes CSS more powerful with variable and math support.

What\'s the difference with SCSS? Is it supposed to be

Answer 1

The basic difference is the syntax. While SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS.

Answer 2

The Sass .sass file is visually different from .scss file, e.g.

Example.sass - sass is the older syntax

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css is the new syntax as of Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Any valid CSS document can be converted to Sassy CSS (SCSS) simply by changing the extension from .css to .scss.

Answer 3

Sass (Syntactically Awesome StyleSheets) have two syntaxes:

• a newer: SCSS (Sassy CSS)
• and an older, original: indent syntax, which is the original Sass and is also called Sass.

So they are both part of Sass preprocessor with two different possible syntaxes.

The most important difference between SCSS and original Sass:

SCSS:

• Syntax is similar to CSS (so much that every regular valid CSS3 is also valid SCSS, but the relationship in the other direction obviously does not happen)

• Uses braces {}

• Uses semi-colons ;
• Assignment sign is :
• To create a mixin it uses the @mixin directive
• To use mixin it precedes it with the @include directive
• Files have the .scss extension.

Original Sass:

• Syntax is similar to Ruby
• No braces
• No strict indentation
• No semi-colons
• Assignment sign is = instead of :
• To create a mixin it uses the = sign
• To use mixin it precedes it with the + sign
• Files have the .sass extension.

Some prefer Sass, the original syntax - while others prefer SCSS. Either way, but it is worth noting that Sass’s indented syntax has not been and will never be deprecated.

Conversions with sass-convert:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

The Sass and SCSS documentation

Answer 4

SASS stands for Syntactically Awesome StyleSheets. It is an extension of CSS that adds power and elegance to the basic language. SASS is newly named as SCSS with some chages, but the old one SASS is also there. Before you use SCSS or SASS please see the below difference.

An example of some SCSS and SASS syntax:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

Output CSS after Compilation(Same for Both)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

For more guide you can see the official website.

Answer 5

SASS is Syntactically Awesome Style Sheets and is an extension of CSS which provides the features of nested rules, inheritance, Mixins whereas SCSS is Sassy Cascaded Style Sheets which is similar to that of CSS and fills the gaps and incompatibilities between CSS and SASS. It was licensed under the MIT license. This article has more about the differences:https://www.educba.com/sass-vs-scss/

Answer 6

Its syntax is different, and that's the main pro (or con, depending on your perspective).

I'll try not to repeat much of what others said, you can easily google that but instead, I'd like to say a couple of things from my experience using both, sometimes even in the same project.

SASS pro

• cleaner - if you are coming from Python, Ruby (you can even write props with symbol-like syntax) or even the CoffeeScript world, it will come very natural to you - writing mixins, functions and generally any reusable stuff in .sass is much 'easier' and readable than in .scss (subjective).

SASS cons

• whitespace sensitive (subjective), I don't mind it in other languages but here in CSS it just bothers me (issues: copying, tab vs space war, etc).
• no inline rules (this was game breaking for me), you can't do body color: red like you can in .scss body {color: red}
• importing other vendor stuff, copying vanilla CSS snippets - not impossible but very boring after some time. The solution is to either have .scss files (alongside with .sass files) in your project or to convert them to .sass.

Other than this - they do the same job.

Now, what I like to do is to write mixins and variables in .sass and code that will actually compile to CSS in .scss if possible (ie Visual studio doesn't have support for .sass but whenever I work on Rails projects I usually combine two of them, not in one file ofc).

Lately, I'm considering giving Stylus a chance (for a full-time CSS preprocessor) because it allows you to combine two syntaxes in one file (among some other features). That may not be a good direction for a team to take but when you are maintaining it alone - it's ok. The stylus is actually most flexible when syntax is in question.

And finaly mixin for .scss vs .sass syntax comparison:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover