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 the same language? Similar? Different?

Vitriform

Anyone wondering what is the difference between scss and sass syntax, see https://mcmap.net/q/40964/-why-we-are-using-sass-even-we-are-using-scss-duplicate – Antenna

Answer 1

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:

The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular.

The indented syntax was Sass’s original syntax, and so it uses the file extension .sass. Because of this extension, it’s sometimes just called “Sass”. The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to describe the format of the document.

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.

Weber

When choosing the syntax, keep in mind that only scss allows copying and pasting css from stackoverflow and the browsers' development tools, whereas in sass you always have to adjust the syntax – Bushed

CSS3 has variables: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables – Remotion

Another gotcha: as of 2019-05-10, SASS still does not support multi-line expressions, so large lists/maps have to be either one-liners, defined using lots of function calls, or defined in SCSS files. It seems to be still a planned feature, but I'm not sure if there's actually any movement on implementation or not yet. – Reception

As of today, it says "With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well." ... you simply can't write something like that without providing a link to further details about the "small exceptions" :( – Sanguinaria

Upgraded the above comment into a question #64552319 – Sanguinaria

^ The small exceptions turned out to be related to CSS functions (like min, max, etc.) that existed in SCSS before plain CSS, as mentioned further in the manual sass-lang.com/documentation/syntax/special-functions – Sanguinaria

Answer 2

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.

Dubbing

Excuse me? Did I read that right? Can Sass actually import Less files correctly? Is there any synergy between mixins/variables? – Olney

Similarity to standard CSS may be more important in group environments where there are people who need to read your code, but only occasionally, and they don't have time/interest to learn a whole new syntax. – Begone

Does the "UI" mean the "language"? – Pretonic

@Pretonic - yeah, my interpretation of "UI" here would be the programmer-facing syntax of the file. Eg semicolons or not, etc. – Recalcitrant

Should “UI” in the answer be replaced with more commonly understand term, as @orionelenzil suggested? – Maladjusted

We never did get an explanation as to what you mean by Sass having a LESS syntax parser – Prolactin

Can't find anything on less in the libsass repo - was it a typo? – Zelazny

Why does SCSS require semicolons? – Coronel

@JacobStamm Chris apparently hasn't been on StackOverflow (under this account at least) for over five years. We're probably not getting an update from him. 😔 It's easy to find that he's still active on github, xitter, and works at Patreon, so I believe he's still around if you really wanted to follow up. – Faydra

Answer 3

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.

Leid

@Novocaine +1, I agree. As a C++ programmer, I prefer the brackets and semicolons. BTW, I have a question, does the conversion from .scss to .css the same as .css to .scss? – Involucre

This is more what I care about compare with the answers above... Too lazy to read ;-) – Linesman

@JW.ZG, It's not a conversion, native .css just happens to be valid .scss. As soon as you add scss specific code, changing the file name back will end up as an invalid css file. css is a square, and scss is a rectangle. All squares are rectangles, but not all rectangles are squares. – Prima

@Prima except that some rectangles need to be modified in order to be converted to squares. CSS never needs to be modified to convert into SCSS, it just is. – Seclusive

@WoodrowBarlow I'm not sure why you used the word "except". We're saying exactly the same thing. – Prima

Upvoted for providing code snippets. The other answers provide more background information, but this one let me quickly recognize what syntaxes I had seen in the past, and which looked familiar. – Alpenhorn

Answer 4

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 (web 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

Fencer

Strange that such clear and concise answer has such less votes than others. I have been going through piles of sources to understand what are the differences between Sass and Scss and finally found this that instantly enlighten me. Good job except a few spelling/grammar errors. – Resign

@TonyNg thank you. I'm glad I could help you. Regarding the points, it is so sure because I answered very late – about 6 years after asking questions. Feel free to correct me, where I made spelling or grammatical errors. – Fencer

Add a simple example to show the different syntax and this answer would be perfect. – Deron

One of the best answers that I've read so far. Had been searching for the exact difference at everywhere. Thank you for writing this. – Candless

Doesn't original Sass follows strict indentation @Fencer ? – Minutely

Answer 5

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

Woebegone

@cimmanon It features pros and cons, spelled out clearly. That is the difference between this and other answers. I upvoted to pull out of the red. I thought it was useful even though it has the usual venn diagram of answer overlap that every other SO post has. This could be more useful to someone just making the choice on the two paths. I also think it's a bit better than the accepted answer because it actually shows the difference of the language instead of just saying "Sass is different because it's not SCSS", which to me is useless. I could do without the personal usage stuff, but still :) – Capture

Reading this 7 yrs later; yuph, I never gave stylus a chance :) – Woebegone

Answer 6

From the homepage of the language

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

SASS is an interpreted language that spits out CSS. The structure of Sass looks like CSS (remotely), but it seems to me that the description is a bit misleading; it's not a replacement for CSS, or an extension. It's an interpreter which spits out CSS in the end, so Sass still has the limitations of normal CSS, but it masks them with simple code.

Mcmurry

Answer 7

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.

Landers

Ruby Sass was the original implementation of Sass, but it reached its end of life as of 26 March 2019. Dart Sass is now the primary implementation of Sass. – Brutality

Answer 8

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

Heriberto

Answer 9

Sass was the first one, and the syntax is a bit different. For example, including a mixin:

Sass: +mixinname()
Scss: @include mixinname()

Sass ignores curly brackets and semicolons and lay on nesting, which I found more useful.

Concentre

Answer 10

Difference between SASS and SCSS article explains the difference in details. Don’t be confused by the SASS and SCSS options, although I also was initially, .scss is Sassy CSS and is the next generation of .sass.

If that didn’t make sense you can see the difference in code below.

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

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

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

In the code above we use ; to separate the declarations. I’ve even 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 */
$blue: #3bbfce
$margin: 16px

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

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

You can see from the CSS below that the SCSS style is a lot more similar to regular CSS than the older SASS approach.

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

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

I think most of the time these days if someone mentions that they are working with Sass they are referring to authoring in .scss rather than the traditional .sass way.

Prevent

Answer 11

Original sass is ruby syntax-like, similar to ruby, jade etc...

In those syntaxes, we don't use {}, instead we go with white spaces, also no usage of ;...

In scss syntaxes are more like CSS, but with getting more options like: nesting, declaring, etc, similar to less and other pre-processing CSS ...

They basically do the same thing, but I put couple of lines of each to see the syntax difference, look at the {}, ;, and spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

Bluecoat

Ruby Sass was the original implementation of Sass, but it reached its end of life as of 26 March 2019. Dart Sass is now the primary implementation of Sass. – Brutality

Answer 12

The compact answer:

SCSS refers to the main syntax supported by the Sass CSS pre-processor.

• Files ending with .scss represent the standard syntax supported by Sass. SCSS is a superset of CSS.
• Files ending with .sass represent the "older" syntax supported by Sass originating in the Ruby world.

Ruffianism

Ruby Sass was the original implementation of Sass, but it reached its end of life as of 26 March 2019. Dart Sass is now the primary implementation of Sass. – Brutality

Answer 13

TL;DR

Both is Sass but different is only the compile option.

S(assy) CSS = Sass

There is not only one syntax in which you can use SASS, but two: On the one hand you have the original form, which is gladly called "indented syntax" or simply "SASS". In addition, there is a newer variant, which is more closely oriented to the specifications of CSS and is therefore called Sassy CSS (SCSS) - i.e. CSS in the style of SASS. With version 3 of SASS, SCSS has been established as the official syntax. The biggest difference: the use of brackets and semicolons.

The original SASS syntax uses indentations and line breaks, an approach modeled on YAML. To terminate a line of code, it is enough to make a line break - i.e. press the Enter key. Indentations work quite simply via the tabulator. So by changing the position in the typeface, groupings are formed - so-called declaration blocks. This is not possible with CSS itself. Here, curly braces must be used for the groupings and semicolons for the property declarations. And this is exactly what is necessary with SCSS.

So it becomes a dispute between SASS vs SCSS

Some users swear by the ease of use of the original SASS, where you don't have to pay attention to the proper placement of parentheses when moving snippets of source code around, and generally produces leaner, more concise code. Overall, the "indented syntax" makes do with fewer characters and lines. The supporters of SCSS, on the other hand, are happy to accept the additional effort, because it is more similar to what is known from CSS anyway.

SCSS is a superset to CSS, and this ensures that CSS code basically also works in SCSS - but not the other way around. Nevertheless, the functions of SASS are still fully included. This makes it easier to work with both languages at the same time. In addition, for people who already work with CSS and have become accustomed to the syntax, the switch is much easier. Although SASS supports both syntaxes, you have to choose per project: To be able to distinguish the different formats, you give the files either the extension .sass or .scss.

Mnemonic

Answer 14

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/

Paracelsus

Answer 15

SCSS is SASS.

You can't say they are different.

But .scss and .sass files are different SASS syntaxes.

Sass has two syntaxes.

1. The SCSS syntax (.scss) is used most commonly. It's a superset of CSS, which means all valid CSS is also valid SCSS.

2. The indented syntax (.sass) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. (Similar to python syntax)

Brominate

Answer 16

SCSS is the new syntax for Sass. In Extension wise, .sass for the SASS while .scss for the SCSS. Here SCSS has more logical and complex approach for coding than SASS. Therefore, for a newbie to software field the better choice is SCSS.

Church

Answer 17

Found myself wondering the same thing, and stumbled upon a straight-forward explanation in Harvard's CS50:

A language called Sass ... (is) essentially an extension to CSS ... it adds additional features to CSS ... just to make it a little bit more powerful for us to use.

One of the key features of Sass is the ability to use variables

The Sass extension is .scss (as opposed to .css for a regular CSS file).

So, when we ask "what is the difference between scss and sass?" - the answer could simply be that .scss is simply the file extension used when wishing to use Sass instead of regular CSS.

Indebtedness