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.

Practice

1. Which of the following best describes the main difference between SASS and SCSS syntax?

easy

A. SCSS uses indentation only; SASS uses braces and semicolons.

B. SASS requires semicolons; SCSS does not use semicolons or braces.

C. SASS uses indentation without braces or semicolons; SCSS uses braces and semicolons like CSS.

D. SASS and SCSS have identical syntax and formatting rules.

Solution

1. Step 1: Understand SASS syntax style

   SASS syntax relies on indentation to separate blocks and does not use braces or semicolons.

2. Step 2: Understand SCSS syntax style

   SCSS syntax is similar to CSS, using braces to group blocks and semicolons to end statements.

3. Final Answer:

   SASS uses indentation without braces or semicolons; SCSS uses braces and semicolons like CSS. -> Option C

4. Quick Check:

   SASS indentation vs SCSS braces = D [OK]

Hint: Remember: SASS is indentation-based, SCSS looks like CSS [OK]

Common Mistakes:

• Confusing which syntax uses braces
• Thinking both use semicolons the same way
• Assuming SASS and SCSS are identical

2. Which of the following is a correct SCSS syntax for a simple style rule?

easy

A. body: { color blue }

B. body { color: blue; }

C. body
color: blue

D. body { color blue }

Solution

1. Step 1: Identify SCSS syntax rules

   SCSS uses braces to group declarations and semicolons to end each property line, just like CSS.

2. Step 2: Check each option

   body { color: blue; } uses braces and semicolon correctly. Options A, B, and D miss semicolons or use wrong punctuation.

3. Final Answer:

   body { color: blue; } -> Option B

4. Quick Check:

   SCSS = braces + semicolons [OK]

Hint: SCSS looks like CSS: braces and semicolons [OK]

Common Mistakes:

• Omitting semicolons in SCSS
• Using indentation-only style in SCSS
• Misplacing colons or braces

3. Given the following SASS code, what CSS will it compile to?

nav
  ul
    margin: 0
    padding: 0
  li
    list-style: none

medium

A. nav ul li { margin: 0; padding: 0; list-style: none; }

B. nav { ul { margin: 0; padding: 0; } li { list-style: none; } }

C. nav ul { margin: 0 padding: 0 } nav li { list-style none }

D. nav ul { margin: 0; padding: 0; } nav li { list-style: none; }

Solution

1. Step 1: Understand SASS nesting

   In SASS, indentation shows nesting. "ul" and "li" are nested inside "nav" but are siblings, not nested inside each other.

2. Step 2: Translate nesting to CSS selectors

   "nav ul" and "nav li" become separate selectors with their own properties.

3. Final Answer:

   nav ul { margin: 0; padding: 0; } nav li { list-style: none; } -> Option D

4. Quick Check:

   SASS indentation nesting = separate CSS selectors [OK]

Hint: Indentation means nesting, siblings become separate selectors [OK]

Common Mistakes:

• Combining ul and li styles incorrectly
• Missing semicolons in output
• Confusing nesting levels

4. Identify the error in this SCSS code snippet:

.container {
  width: 100%
  height: 50px;
}

medium

A. Missing semicolon after width property

B. Incorrect use of braces

C. Indentation error

D. Property name misspelled

Solution

1. Step 1: Check SCSS property syntax

   Each property must end with a semicolon in SCSS.

2. Step 2: Locate missing semicolon

   The width property line ends without a semicolon, causing a syntax error.

3. Final Answer:

   Missing semicolon after width property -> Option A

4. Quick Check:

   SCSS requires semicolons after properties [OK]

Hint: Every SCSS property line needs a semicolon [OK]

Common Mistakes:

• Forgetting semicolons in SCSS
• Assuming indentation fixes missing semicolons
• Confusing SCSS with SASS syntax

5. You want to convert this SCSS code to SASS syntax:

.card {
  padding: 1rem;
  border: 1px solid black;
  .title {
    font-weight: bold;
  }
}

Which is the correct SASS equivalent?

hard

A. .card
padding: 1rem
border: 1px solid black
.title
font-weight: bold

B. .card {
padding: 1rem;
border: 1px solid black;
.title {
font-weight: bold;
}
}

C. .card
padding: 1rem;
border: 1px solid black;
.title
font-weight: bold;

D. .card {
padding: 1rem
border: 1px solid black
.title {
font-weight: bold
}
}

Solution

1. Step 1: Remove braces and semicolons for SASS

   SASS syntax uses indentation only, no braces or semicolons.

2. Step 2: Apply correct indentation

   Properties and nested selectors are indented properly under their parent selectors.

3. Final Answer:

   .card padding: 1rem border: 1px solid black .title font-weight: bold -> Option A

4. Quick Check:

   SASS = indentation, no braces or semicolons [OK]

Hint: Drop braces and semicolons, use indentation for nesting [OK]

Common Mistakes:

• Leaving braces or semicolons in SASS
• Incorrect indentation levels
• Mixing SCSS and SASS syntax