Sass Essentials: A Friendly Intro Quiz Quiz

1. What Sass Is

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

   1. Sass is a stylesheet preprocessor that adds features like variables, nesting, and mixins and compiles to CSS.
   2. Sass is a CSS reset that removes default browser styles.
   3. Sass is a JavaScript framework for building user interfaces.
   4. Sass is a browser plugin that speeds up page loading.
   5. Sass is an HTML templating language.

2. SCSS File Extension

   If you are using the SCSS syntax of Sass, which file extension should your stylesheet use?

   1. .scss
   2. .sass
   3. .css
   4. .scs
   5. .sassx

3. Using Variables

   Given the Sass code $gap: 10px; .box { margin: $gap; }, what will the compiled CSS margin value be for .box?

   1. margin: 10px;
   2. margin: $gap;
   3. margin: var(--gap);
   4. margin: 10;
   5. margin: px10;

4. Nesting Selectors

   If you write Sass as nav { ul { margin: 0; } }, which CSS selector will the nested rule compile into?

   1. nav ul { margin: 0; }
   2. nav u003E ul { margin: 0; }
   3. .nav ul { margin: 0; }
   4. ul nav { margin: 0; }
   5. nav:ul { margin: 0; }

5. Mixins and Reuse

   What Sass feature lets you define reusable declarations with @mixin and apply them with @include, such as @include rounded(4px)?

   1. Mixins
   2. Modules
   3. Placeholders
   4. Macros
   5. Mixens

6. Extending with Placeholders

   Given %btn { padding: 8px; } and .primary { @extend %btn; }, what effect does @extend have on .primary in the compiled CSS?

   1. It applies the styles from %btn to .primary so .primary gets padding: 8px;
   2. It imports an external file named btn into .primary;
   3. It converts %btn into a mixin and includes it;
   4. It sets a CSS variable named %btn on .primary;
   5. It removes the .primary rule from the output;

7. Partials and @use

   If you have a partial file named _colors.scss that defines variables, which modern Sass statement should you write in another file to load it?

   1. @use 'colors';
   2. @import '_colors.scss';
   3. @include 'colors';
   4. @require 'colors';
   5. @apply 'colors';

8. Math in Sass

   What is the compiled CSS result of width: (600px / 2) written in a Sass rule?

   1. width: 300px;
   2. width: 600/2px;
   3. width: 300;
   4. width: calc(600px / 2);
   5. width: 3e2px;

9. Color Utilities

   When you write color: lighten(#3366ff, 10%); in Sass, what capability are you using to adjust the color before output?

   1. Built-in color functions
   2. Media query mixins
   3. CSS custom properties
   4. Vendor-specific prefixes
   5. Lightner functions

10. Compilation to CSS

    Which statement about using .scss files in the browser is correct?

    1. Browsers cannot read .scss directly, so Sass must be compiled into plain .css before being served.
    2. Modern browsers can natively parse and execute .scss files without any build step.
    3. Only mobile browsers support .scss files if a viewport meta tag is present.
    4. Browsers can read .scss directly if the file is linked with rel='stylesheet/sass'.
    5. You must inline .scss in a script tag for browsers to understand it.