Sass Essentials: A Friendly Intro Quiz Quiz

Explore key Sass concepts and best practices designed for smooth CSS workflows, focusing on variables, nesting, mixins, and partials. This quiz is perfect for those looking to reinforce their understanding of Sass syntax and its core features.

1. Understanding Sass Variables

   Which statement correctly demonstrates how to declare and use a variable for a primary color in Sass?

   1. var $primary-color = #3498db; .button { color: var($primary-color); }
   2. $primary-color: #3498db; .button { color: $primary-color; }
   3. @primarycolor: #3498db; .button { color: @primarycolor; }
   4. primary-color = #3498db; .button { color: primary-color; }

   Explanation: The correct way to declare and use a Sass variable is with a dollar sign, as shown in answer A. Option B uses equals signs and omits the dollar sign, which is not valid in Sass. Option C uses the at symbol, which is incorrect for Sass variables. Option D mixes syntax from CSS custom properties and JavaScript-style declarations, which is not valid in Sass.

2. Nesting in Sass

   In Sass, which of the following examples demonstrates correctly nested selectors for styling links inside a navigation bar?

   1. .nav { a { color: blue; } }
   2. @nav a { color: blue; }
   3. nav { a: { color: blue; } }
   4. .nav a { color: blue; }

   Explanation: Nested selectors in Sass use curly braces, where child selectors are placed inside the block of the parent, as shown in the correct answer. Option B incorrectly places a colon after the child selector, which is invalid syntax. Option C is valid CSS, but does not use Sass's nesting feature. Option D incorrectly uses an at symbol, which is not used in this context in Sass.

3. Mixins for Code Reusability

   Which code snippet properly defines and includes a Sass mixin for a border radius property?

   1. mixin rounded() { border-radius: 5px; } .box { include(rounded); }
   2. @include rounded { border-radius: 5px; } .box { mixin rounded; }
   3. $mixin rounded: { border-radius: 5px; } .box { include($rounded); }
   4. @mixin rounded { border-radius: 5px; } .box { @include rounded; }

   Explanation: The correct answer uses @mixin to define and @include to use the mixin, matching Sass syntax. Option B lacks the @mixin and @include keywords, making it incorrect. Option C confuses the keywords' order and lacks proper definition. Option D misuses the dollar sign and omits correct mixin syntax, resulting in invalid Sass.

4. Understanding Partials and Importing

   How would you create and include a Sass partial named '_variables' in your main Sass file?

   1. Create a file named $variables.sass and use @use 'variables';
   2. Create a file named variables_partials.scss and use @include 'variables_partials';
   3. Create a file named variables.sass and use import '_variables';
   4. Create a file named _variables.scss and use @import 'variables';

   Explanation: Sass partials begin with an underscore and are imported without the underscore or file extension. Option A correctly creates a partial and imports it. Option B uses the wrong import syntax and file extension. Option C uses @include instead of @import, which is reserved for mixins. Option D uses an illegal file name with a dollar sign and mixes up the partial import syntax.

5. Extending Styles Using Inheritance

   What is the correct way to share a set of CSS rules using inheritance in Sass, as shown in the following scenario: both '.alert' and '.warning' should have bold text?

   1. .%bold { font-weight: bold; } .alert { @extend %bold; } .warning { @extend %bold; }
   2. u0026bold { font-weight: bold; } .alert { extend(u0026bold); } .warning { extend(u0026bold); }
   3. $bold { font-weight: bold; } .alert { include($bold); } .warning { include($bold); }
   4. %bold { font-weight: bold; } .alert { @extend %bold; } .warning { @extend %bold; }

   Explanation: Sass uses the percent sign to define a placeholder selector for inheritance, and @extend is used to inherit its styles, as shown in the correct answer. Option A incorrectly uses a dot alongside the percent sign, which is not valid. Option C treats the placeholder as a variable and uses an incorrect include syntax. Option D inappropriately uses an ampersand and omit the necessary @ symbol in @extend.