SCSS Essentials Quiz Quiz

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

1. SCSS Variable Declaration

   Which of the following is the correct way to declare a variable in SCSS?

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

2. Nesting Selectors

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

   1. .container u003E .item { color: red; }
   2. .container-item { color: red; }
   3. .container, .item { color: red; }
   4. .container .item .color-red {}
   5. .container .item { color: red; }

3. SCSS @mixin Syntax

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

   1. #mixin rounded-corner { border-radius: 5px; }
   2. @mix rounded-corner { border-radius: 5px; }
   3. @mixin: rounded-corner { border-radius: 5px; }
   4. @mixin rounded-corner { border-radius: 5px; }
   5. mixin rounded-corner { border-radius: 5px; }

4. Using SCSS @import

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

   1. #import 'variables';
   2. import 'variables';
   3. @import 'variables';
   4. @import variables.scss;
   5. @import '_variables';

5. Interpolation in SCSS

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

   1. .icon-$(name) { color: blue; }
   2. .icon-$[name] { color: blue; }
   3. .icon-${name} { color: blue; }
   4. .icon-@{name} { color: blue; }
   5. .icon-#{$name} { color: blue; }