SCSS Fundamentals Quiz Quiz

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

1. SCSS Variable Declaration

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

   1. @main-color: blue;
   2. var main-color = blue;
   3. #main-color: blue;
   4. $main-color blue;
   5. $main-color: blue;

2. Nesting Selectors in SCSS

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

   1. .parent { child { color: red; } }
   2. .parent u003E .child [ color: red; ]
   3. .parent :child { color: red; }
   4. .parent { .child { color: red; } }
   5. .parent ( .child { color: red; } )

3. Importing Files

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

   1. @use 'buttons';
   2. require 'buttons';
   3. @import 'buttons';
   4. import 'buttons';
   5. @include 'buttons';

4. Mixins Usage

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

   1. @mixin rounded-corners;
   2. @use rounded-corners;
   3. @call rounded-corners;
   4. #include rounded-corners;
   5. @include rounded-corners;

5. SCSS Comments

   Which option will create a comment in SCSS that does NOT appear in the compiled CSS output?

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