css - What's the difference between SCSS and Sass?

ID : 361

viewed : 81

Tags : csssasscss

Top 5 Answer for css - What's the difference between SCSS and Sass?

vote vote

97

Sass is a CSS pre-processor 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.

CSS variables are supported and can be utilized but not as well as pre-processor variables.

For the difference between SCSS and Sass, this text on the Sass documentation page should answer the question:

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, known 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.

However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.

vote vote

83

I'm one of the developers who helped create Sass.

The difference is syntax. Underneath the textual exterior they are identical. This is why sass and scss files can import each other. Actually, Sass has four syntax parsers: scss, sass, CSS, and less. All of these convert a different syntax into an Abstract Syntax Tree which is further processed into CSS output or even onto one of the other formats via the sass-convert tool.

Use the syntax you like the best, both are fully supported and you can change between them later if you change your mind.

vote vote

77

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.

vote vote

70

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. (archive)

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

vote vote

57

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 

Top 3 video Explaining css - What's the difference between SCSS and Sass?

Related QUESTION?