SASS vs SCSS syntax difference - Quick Revision & Key Differences

Recall & Review

beginner

What is the main visual difference between SASS and SCSS syntax?

SASS uses indentation and no curly braces or semicolons, while SCSS uses curly braces and semicolons like CSS.

beginner

Show a simple example of a CSS rule in SASS syntax.

body background-color: #f0f0f0 color: #333

beginner

Show the same CSS rule example in SCSS syntax.

body { background-color: #f0f0f0; color: #333; }

intermediate

Which syntax is a superset of CSS, allowing any valid CSS code to be valid in it?

SCSS is a superset of CSS, so any valid CSS code is also valid SCSS code.

intermediate

Why might a developer choose SASS syntax over SCSS?

Some developers prefer SASS syntax because it is cleaner and less cluttered without braces and semicolons, making it faster to write.

Which syntax requires indentation instead of curly braces?

A Both SASS and SCSS

B SASS

C SCSS

D Neither

SASS uses indentation to define blocks, while SCSS uses curly braces.

Which syntax allows you to write plain CSS code without changes?

A SCSS

B SASS

C Both

D None

SCSS is a superset of CSS, so all CSS code is valid SCSS.

In SCSS, what punctuation ends each property declaration?

A Comma

B No punctuation

C Semicolon

D Period

SCSS uses semicolons to end property declarations, like CSS.

Which syntax might be faster to write due to less punctuation?

A SASS

B SCSS

C Both are the same

D Neither

SASS syntax avoids braces and semicolons, making it quicker to write.

Which syntax is newer and more widely used today?

A SASS

B Neither

C Both equally

D SCSS

SCSS is newer, fully compatible with CSS, and more popular in modern projects.

Explain the key differences between SASS and SCSS syntax.

Think about how blocks and properties are written.

Describe a situation where you might prefer to use SASS syntax over SCSS.

Consider developer speed and style preferences.