SCSS Fundamentals Quiz — Questions & Answers

Test your basic knowledge of SCSS with questions covering variables, nesting, mixins, imports, and comments. Ideal for beginners wishing to assess their foundational understanding.

This quiz contains 5 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Using SCSS Variables

   Which syntax correctly defines a variable for primary color in SCSS?

   • --primary-color: #3498db;
   • @primary-color: #3498db;
   • $primary-color = #3498db;
   • var primary-color: #3498db;
   • $primary-color: #3498db;
   Show correct answer

   Correct answer: $primary-color: #3498db;

2. Question 2: Nesting Selectors

   What is the result of nesting .button:hover inside a .menu class in SCSS?

   • .button menu:hover
   • .button .menu:hover
   • .menu .button:hover
   • .menu:hover.button
   • .menu:hover .button
   Show correct answer

   Correct answer: .menu .button:hover

3. Question 3: Mixins Usage

   Which SCSS feature allows you to reuse a block of styles with parameters, such as @mixin rounded-corner($radius)?

   • Placeholder
   • Partial
   • Mixin
   • Extender
   • Function
   Show correct answer

   Correct answer: Mixin

4. Question 4: Importing Files

   Which keyword is used in SCSS to include the contents of another file, for example, importing _base.scss?

   • #import
   • require
   • include
   • @import
   • @use
   Show correct answer

   Correct answer: @import

5. Question 5: SCSS Comments

   What is the correct syntax in SCSS for a comment that will not appear in the compiled CSS output?

   • <!-- This is a comment -->
   • # This is a comment
   • // This is a comment
   • /* This is a comment */
   • -- This is a comment
   Show correct answer

   Correct answer: // This is a comment