What is the difference between SASS and SCSS

Question

What is the difference between SASS and SCSS

Navigation

#1 by (52 votes)

37

I've been reading about SASS for quite some time and it provides a powerful set of functionality for CSS like variables, mixins, and the like.

And at the same time I see the term SCSS. What's the difference between the two? Are they the same and have the same features and only receive different names in some cases? Or are they different things?

css sintaxe sass

asked by anonymous 15.03.2015 / 23:34

1 answer

What is the difference between the == and === operators in JavaScript? What is Reactive Programming?

score 52 · Accepted Answer

These are two different SASS syntaxes with the same functionality. SASS was originally the official syntax and it is somewhat different from CSS syntax, with no braces and semicolons. The SCSS syntax is now official and is more like CSS syntax. In practice the choice between the two is a matter of taste. See below an example of the syntax SASS and another one of the syntax SCSS

SASS syntax example:

#main
    color: blue
    font-size: 0.3em

    a
        font:
            weight: bold
            family: serif
        &:hover
            background-color: #eee

SCSS Syntax Example:

#main {
    color: blue;
    font-size: 0.3em;

    a {
        font: {
            weight: bold;
            family: serif;
        }
        &:hover {
            background-color: #eee;
        }
    }
}

These codes are actually the same thing only in different syntaxes. Note that using SASS which counts is the indentation, there are no keys or points and commas. Already using SCSS everything is very similar to CSS, you have keys and semicolons. But realize that the SASS features like nesting exist in both syntaxes.