Quiz

// ============================================================
// Q1) What is the modern replacement for @import?
// ============================================================
// ANSWER: @use (and its companion @forward).
//   @use 'tokens';                // namespaced as 'tokens.$primary'
//   @use 'tokens' as t;           // alias
//   @use 'tokens' as *;           // (rarely) no namespace
// Why it matters: @import is deprecated, leaks every variable into the
// global namespace, and re-evaluates every imported file every time.

// ============================================================
// Q2) Why does division give you a deprecation warning?
// ============================================================
// ANSWER: Modern Dart Sass treats '/' as a separator (e.g. font: 16px/24px sans).
//   For division, use math.div or multiplication by an inverse.
@use 'sass:math';
.x { margin: math.div($radius, 2); }       // OK
.y { margin: $radius * 0.5; }              // also OK

// ============================================================
// Q3) How do you read a deeply nested value from a map?
// ============================================================
// ANSWER: map.get with a path (Dart Sass) or repeated map.get calls.
@use 'sass:map';
$tokens: ( 'color': ( 'brand': ( 500: #2563eb, 600: #1e40af ) ) );
.brand { color: map.get($tokens, 'color', 'brand', 500); }

// ============================================================
// Q4) When do you use a mixin vs a function?
// ============================================================
// ANSWER: mixin = emits declarations; function = returns a value.
@mixin shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
@function rem($px) { @return math.div($px, 16) * 1rem; }
.card { @include shadow-md; padding: rem(24); }

// ============================================================
// Q5) How do you make a mixin take a block of styles?
// ============================================================
// ANSWER: @content marks where the caller's block is inserted.
@mixin hover-only { @media (hover: hover) { &:hover { @content; } } }
.btn { @include hover-only { background: tomato; } }

// ============================================================
// Q6) Why does @extend behave surprisingly across selectors?
// ============================================================
// ANSWER: @extend rewrites the selector list of the target. It can cause
//   unexpected combinations across files. Prefer mixins (or placeholder
//   selectors %name) which compose more predictably.
%card-base { padding: 1rem; border-radius: 8px; }
.callout, .alert { @extend %card-base; }

// ============================================================
// Q7) How do you conditionally emit styles?
// ============================================================
// ANSWER: @if / @else if / @else, working on Sass values (not media queries).
@mixin theme($name) {
  @if      $name == 'light' { color: #111; background: #fff; }
  @else if $name == 'dark'  { color: #fff; background: #111; }
  @else { @error 'Unknown theme #{$name}'; }
}

// ============================================================
// Q8) Why does my SCSS suddenly fail in Dart Sass after upgrading?
// ============================================================
// ANSWER: Common causes —
//   - Removed global functions (lighten / darken etc.). Use the 'sass:color' module.
//   - Division behaviour changed (Q2).
//   - @import deprecation warnings became errors in strict mode.
// Fix: run 'sass-migrator' (npm i -g sass-migrator) to auto-rewrite to modules.

// Scoring guide
// 8 / 8 -> teach the team
// 6 / 8 -> ready for production code review
// < 6   -> bookmark this lesson and the Dart Sass changelog

// 3 questions per lesson.