SCSS Fundamentals Quiz Quiz

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

1. Using SCSS Variables

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

   1. --primary-color: #3498db;
   2. @primary-color: #3498db;
   3. $primary-color = #3498db;
   4. var primary-color: #3498db;
   5. $primary-color: #3498db;

2. Nesting Selectors

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

   1. .button menu:hover
   2. .button .menu:hover
   3. .menu .button:hover
   4. .menu:hover.button
   5. .menu:hover .button

3. Mixins Usage

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

   1. Placeholder
   2. Partial
   3. Mixin
   4. Extender
   5. Function

4. Importing Files

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

   1. #import
   2. require
   3. include
   4. @import
   5. @use

5. SCSS Comments

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

   1. u003C!-- This is a comment --u003E
   2. # This is a comment
   3. // This is a comment
   4. /* This is a comment */
   5. -- This is a comment