SCSS Essentials Quiz — Questions & Answers

Test your knowledge of fundamental SCSS concepts, syntax, and features with this short quiz designed for beginners.

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 of the following is the correct way to declare a variable in SCSS?

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

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

2. Question 2: Nesting Selectors

   Given the following SCSS code: '.container { .item { color: red; } }', what does it compile to in CSS?

   • .container > .item { color: red; }
   • .container-item { color: red; }
   • .container, .item { color: red; }
   • .container .item .color-red {}
   • .container .item { color: red; }
   Show correct answer

   Correct answer: .container .item { color: red; }

3. Question 3: SCSS @mixin Syntax

   What is the correct syntax for declaring a mixin in SCSS for reusable styles?

   • #mixin rounded-corner { border-radius: 5px; }
   • @mix rounded-corner { border-radius: 5px; }
   • @mixin: rounded-corner { border-radius: 5px; }
   • @mixin rounded-corner { border-radius: 5px; }
   • mixin rounded-corner { border-radius: 5px; }
   Show correct answer

   Correct answer: @mixin rounded-corner { border-radius: 5px; }

4. Question 4: Using SCSS @import

   How do you import another SCSS file named '_variables.scss' into your current stylesheet?

   • #import 'variables';
   • import 'variables';
   • @import 'variables';
   • @import variables.scss;
   • @import '_variables';
   Show correct answer

   Correct answer: @import 'variables';

5. Question 5: Interpolation in SCSS

   Which option shows the correct way to use interpolation to create dynamic selector names in SCSS?

   • .icon-$(name) { color: blue; }
   • .icon-$[name] { color: blue; }
   • .icon-${name} { color: blue; }
   • .icon-@{name} { color: blue; }
   • .icon-#{$name} { color: blue; }
   Show correct answer

   Correct answer: .icon-#{$name} { color: blue; }