SCSS Fundamentals Quiz — Questions & Answers

Test your basic understanding of SCSS syntax, features, and usage with these beginner-friendly questions designed for anyone new to SCSS.

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: SCSS Variable Declaration

   Which option correctly declares a variable named 'main-color' with the value blue in SCSS?

   • @main-color: blue;
   • var main-color = blue;
   • #main-color: blue;
   • $main-color blue;
   • $main-color: blue;
   Show correct answer

   Correct answer: $main-color: blue;

2. Question 2: Nesting Selectors in SCSS

   How do you properly nest a '.child' selector inside a '.parent' selector in SCSS?

   • .parent { child { color: red; } }
   • .parent > .child [ color: red; ]
   • .parent :child { color: red; }
   • .parent { .child { color: red; } }
   • .parent ( .child { color: red; } )
   Show correct answer

   Correct answer: .parent { .child { color: red; } }

3. Question 3: Importing Files

   Which statement allows you to import another SCSS file named '_buttons.scss' into your current SCSS file?

   • @use 'buttons';
   • require 'buttons';
   • @import 'buttons';
   • import 'buttons';
   • @include 'buttons';
   Show correct answer

   Correct answer: @import 'buttons';

4. Question 4: Mixins Usage

   What is the correct way to include a mixin named 'rounded-corners' in a CSS class using SCSS?

   • @mixin rounded-corners;
   • @use rounded-corners;
   • @call rounded-corners;
   • #include rounded-corners;
   • @include rounded-corners;
   Show correct answer

   Correct answer: @include rounded-corners;

5. Question 5: SCSS Comments

   Which option will create a comment in SCSS that does 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