Skip to content

CSS vs SASS vs SCSS

As with many other languages, CSS has spawned easier and alternative methods of utilising the syntax. Just like JavaScript spawned the creation of jQuery by developers as a means to simplify the syntax, so too has the community created quicker and more efficient methods for developers to create their stylesheets. We’ve discussed what CSS is and how it works, but there are two other popular syntaxes of CSS known as SASS and SCSS which we will discuss today.

What is SASS?

SASS stands for Syntactically Awesome Style Sheets and is a style sheet language just like CSS. Technically speaking, SASS is a pre-processor of CSS. What this means that SASS is an extension of CSS which allows developers to write style sheets in SASS which is then compiled and interpreted as CSS by the browser.

SASS allows for the use of various features such as variables and nested rules which allows developers to create more organised style sheets quicker and more efficiently.

What is SCSS?

SCSS stands for Sassy Cascading Style Sheets and is an extended syntax of SASS. Just like SASS, SCSS is an extension of CSS and allows developers to create neater and more efficient style sheets quicker, but one of the key differences would be in that SCSS resembles the CSS syntax more closely than SASS. SCSS still provides the features and benefits which developers have with using SASS, but as stated above, the largest difference between SASS and SCSS would be in the way in which they are written and formatted.