SCSS Essentials: An Easy Intro Quiz for Modern CSS Quiz

1. What Is SCSS?

   Which statement best describes SCSS in the context of styling web pages?

   1. A syntax of Sass that is fully compatible with plain CSS and compiles to standard CSS.
   2. A built-in feature of browsers that replaces HTML.
   3. A CSS framework for responsive layouts.
   4. A JavaScript library for building user interfaces.
   5. An image format used for sprites.

2. Declaring Variables

   In the SCSS snippet `$primary: #3498db; .btn { color: $primary; }`, which symbol indicates a variable in SCSS?

   1. $
   2. @
   3. --
   4. #
   5. %

3. Selector Nesting

   In the SCSS code `.nav { ul { li { a { color: red; } } } }`, what SCSS feature is being used to organize selectors hierarchically?

   1. Selector nesting
   2. Vendor prefixing
   3. CSS Grid layout
   4. Shadow DOM encapsulation
   5. Namespacing with @namespace

4. Partials and Modules

   When you create a file named `_colors.scss` and reference it from another file, what is the purpose of the leading underscore in SCSS?

   1. It marks the file as a partial that does not generate a standalone CSS file and is intended to be loaded with @use or @import.
   2. It makes all variables global across all projects.
   3. It minifies the file automatically on save.
   4. It converts hex colors to RGB automatically.
   5. It enables special browser caching for that file.

5. Using Mixins

   Given `@mixin center { display: flex; justify-content: center; align-items: center; } .card { @include center; }`, what does `@include center;` do in SCSS?

   1. It inserts the declarations from the `center` mixin into `.card`.
   2. It creates a new CSS variable named `center`.
   3. It imports a CSS file called center.css.
   4. It calls a JavaScript function named center().
   5. It extends `.card` with a placeholder selector.

6. Functions vs Mixins

   Which SCSS feature is specifically designed to compute a value and return a single result, as in `@function ratio($w, $h) { @return $w / $h; }`?

   1. Functions
   2. Mixins
   3. Placeholders
   4. Partials
   5. Maps

7. Color Utilities

   In the SCSS rule `.tag { background: lighten(#336699, 10%); }`, what does the `lighten` function do?

   1. It increases the lightness of the color by 10%.
   2. It reduces the saturation of the color by 10%.
   3. It makes the color 10% more transparent.
   4. It darkens the color by 10%.
   5. It converts the color to HSL format.

8. The Ampersand Operator

   In the SCSS snippet `.btn { u0026:hover { opacity: 0.9; } u0026--primary { color: white; } }`, what does the `u0026` symbol represent?

   1. It refers to the current parent selector `.btn`.
   2. It performs a logical AND operation between selectors.
   3. It concatenates two files at build time.
   4. It resets the inheritance chain to the root.
   5. It is a typo and should be the `@` symbol.

9. Placeholders and @extend

   What prefix is used in SCSS to declare a placeholder selector that is intended only for use with `@extend`, as in `%button-base { padding: 0.5rem 1rem; }`?

   1. %
   2. #
   3. $
   4. u0026
   5. @@

10. Compilation to CSS

    Before a browser can use styles written in SCSS, what must happen to the SCSS files in a typical workflow?

    1. They must be compiled into plain CSS.
    2. They must be embedded directly into HTML without changes.
    3. They must be transpiled into JavaScript.
    4. They must be converted into SVG graphics.
    5. They must be renamed with the `.csss` extension.