What is the difference between SASS and SCSS

Asked

Viewed 36,638 times

52

I have been reading about SASS for some time and it provides a powerful feature set for CSS as 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 thing and have the same functionalities and only receive different names in some cases? Or are they different things?

css syntax sass

2 answers

74


They are two different syntaxes of SASS with the same functionalities. SASS was originally the official syntax and it is somewhat different from CSS syntax, with no keys and dots and commas. The SCSS syntax is now the official syntax and is more like the CSS syntax. In practice the choice between the two is a matter of taste. Look below for an example of SASS syntax and another example of SCSS syntax

Example of SASS Syntax:

#main
    color: blue
    font-size: 0.3em

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

Example of SCSS Syntax:

#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 syntax. Note that using SASS what counts is identation, there are no keys or dots and commas. Already using SCSS everything looks very much like CSS, you have keys and dots and commas. But note that SASS features like nesting exist in both syntaxes.

  • Thank you very much, now it’s clear.

2

SCSS is a more modern version and should be used if you are starting a new project.

The great advantage of SCSS is that it is compatible with CSS, so if you already have a working CSS file, just use it as a base. So you can gradually use the SCSS features you want. It’s much easier to adapt a design/template that someone has made for you.

The SASS language seems to be cleaner and clearer, but compatibility is a more important Feature.

Browser other questions tagged css syntax sass

You are not signed in. Login or sign up in order to post.