Search code examples
csssass

Confusion on Sass and SCSS

My confusion comes from (aside from being relatively new) the term "Sass" being used to refer to both Sass and SCSS syntax.

Based on this guide, they are distinct: http://sass-lang.com/guide

So when reading a discussion, or a job listing, unless syntax is provided I am not sure which dialect they are talking about.

Has Sass syntax been replaced by SCSS syntax (or vice-versa) and just falls under the umbrella term "Sass"?

Just want to make sure I have been using and learning is the current syntax. I have been learning the SCSS syntax.

Solution

  • SASS is SASS, SCSS is SASS.

    They are practically the same thing, except the main differences between them being that SASS does not require curly braces or semi-colons and some find this a bit daunting at first, so the good people behind it created SCSS, which likes its curly braces { } and semi-colons ; .

    SASS

    section 
  header
    width: 100%
    height: 40px

    SCSS

    section {
  header {
    width: 100%;
    height: 40px;
  }
}

    More detailed information about this can be found at the main SASS website.

    And ofcourse, the file-extension being changed from *.sass to *.scss so that one can be aware of the fact.

    These are the main differences, there are other bits and nits but the choice between both comes down to personal preference or project requirements.

    Verdict: If you know SASS, you know SCSS.