SASS vs SCSS syntax difference - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to write a variable in SCSS syntax.

SASS

$primary-color: [1];

Drag options to blanks, or click blank then click option'

A#333

Bprimary-color

Ccolor-primary

D333

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the semicolon at the end.

Using variable names without the dollar sign.

In SCSS, variables start with $ and are assigned values with a colon and semicolon. Here, #333 is a valid color value.

2fill in blank

medium

Complete the code to write a nested style in SCSS syntax.

SASS

nav {
  ul {
    margin: [1];
  }
}

Drag options to blanks, or click blank then click option'

Anone

B5px

Cauto

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' as a margin value (which is invalid).

Forgetting the semicolon.

In SCSS, nested styles are written inside braces. Here, margin: 0; removes default margin.

3fill in blank

hard

Fix the error in this SASS syntax by completing the blank.

SASS

body
  font-family: [1]

Drag options to blanks, or click blank then click option'

Afont-family

BArial, sans-serif

C"Arial, sans-serif"

Dfont family

Attempts:

3 left

💡 Hint

Common Mistakes

Adding quotes unnecessarily.

Using braces or semicolons in SASS syntax.

In SASS syntax (indented), property values are written without quotes unless needed. Here, Arial, sans-serif is correct without quotes.

4fill in blank

hard

Fill both blanks to write a nested style in SASS syntax.

SASS

nav
  ul
    margin: [1]
    padding: [2]

Drag options to blanks, or click blank then click option'

A0

B10px

Cnone

D5rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' for margin or padding (invalid).

Mixing SCSS braces with SASS indentation.

In SASS syntax, indentation replaces braces. Here, margin: 0 removes margin and padding: 10px adds padding.

5fill in blank

hard

Fill all three blanks to write a variable and use it in SCSS syntax.

SASS

[1]: #ff0000;
.button {
  background-color: [2];
  border: 1px solid [3];
}

Drag options to blanks, or click blank then click option'

A$danger-color

C#ff0000

Ddanger-color

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the dollar sign in variable names.

Using variable name without the dollar sign in property values.

In SCSS, variables start with $. Here, $danger-color is defined and used for background and border colors.