Categories
css sass

What’s the difference between SCSS and Sass?

2341

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?

1

2234

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.

8

  • 407

    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

    – fishbone

    Nov 23, 2016 at 6:49


  • 30

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

    – Josh

    Feb 11, 2017 at 21:29

  • 3

    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.

    May 10, 2019 at 17:20

  • 32

    @0x1ad2 The choice between scss and sass is more than just personal preference these days. scss is much more prevalent – used in the most popular CSS frameworks like Bootstrap, Foundation, Materialize etc. The main UI frameworks favor scss over sass by default – Angular, React, Vue. Any tutorials or demos will generally use scss e.g create-react-app facebook.github.io/create-react-app/docs/…

    – Drenai

    Aug 11, 2019 at 23:42


  • 3

    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” 🙁

    – oseiskar

    Oct 27, 2020 at 9:42


743

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.

7

  • 71

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

    – pilau

    Jun 1, 2013 at 13:30

  • 8

    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.

    – c roald

    Aug 16, 2014 at 21:25

  • 6

    Does the “UI” mean the “language”?

    – djechlin

    Feb 20, 2019 at 16:09

  • @djechlin – yeah, my interpretation of “UI” here would be the programmer-facing syntax of the file. Eg semicolons or not, etc.

    Mar 14, 2019 at 16:13

  • 14

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

    May 14, 2019 at 22:07

430

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.

6

  • 1

    @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?

    – JW.ZG

    Feb 2, 2016 at 4:42

  • 1

    This is more what I care about compare with the answers above… Too lazy to read 😉

    – LYu

    Sep 21, 2018 at 21:04

  • 14

    @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.

    – Grant

    Jun 13, 2019 at 2:38


  • @Grant 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.

    Nov 20, 2020 at 0:42

  • 1

    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.

    Dec 15, 2020 at 5:04