Certificate

# ===== Skills checklist =====
# After working through the SCSS track you should be able to:
# [x] Compile SCSS to CSS via Dart Sass (sass --watch, Vite, esbuild)
# [x] Use @use / @forward correctly — and avoid @import
# [x] Build a design-token system with maps + a token() function
# [x] Author themable components via CSS variables + SCSS interpolation
# [x] Write mixins with arguments AND @content blocks
# [x] Use breakpoints from a map with a respond-to mixin
# [x] Run sass-migrator to migrate legacy stylesheets to modules
# [x] Lint with Stylelint to enforce conventions
# [x] Convert tokens + components into reusable npm packages
# [x] Debug a 'why is this rule winning' specificity question

# ===== Bookmark =====
# - https://sass-lang.com/documentation/   the canonical docs
# - https://github.com/sass/sass-migrator   automated module migration
# - https://stylelint.io                    linting + a recess-order plugin
# - https://www.refactoringui.com/          design systems with token thinking
# - https://every-layout.dev/                composable layout primitives

# ===== Portfolio piece (1-2 hours) =====
# Build and publish a small design system that demonstrates:
# 1) A _tokens.scss with color, space, radius, shadow tokens (as maps)
# 2) A token() function with a clear error on misuse
# 3) A respond-to($bp) mixin from a breakpoints map
# 4) Three small components: Button, Card, Field
#    - Each themable via CSS variables
#    - Hover / focus states with motion-safe variants
#    - Dark mode via a [data-theme='dark'] selector
# 5) A demo page in /docs that imports the components and toggles theme
# 6) A README that shows how to consume the system in another project
# 7) Published to npm (private or public, your choice) OR a public Github repo

# ===== What 'good' looks like =====
# - No literal hex codes in component SCSS; everything via token()
# - One source of truth for breakpoints
# - Stylelint clean (extends recommended-scss + recess-order)
# - Compiles with both Vite (sass package) and standalone sass CLI
# - Bundle size budget: < 30KB gzipped for the entire component CSS
# - Sass-migrator clean (no @import warnings in CI)

# ===== Common mistakes to avoid =====
# - One giant variables.scss with 200 $ entries -> use maps + token()
# - Hard-coded breakpoints scattered across files -> respond-to() mixin
# - Mixing units (px, em, rem) without a convention -> rem for typography + space
# - Editor scope leak via @use 'tokens' as *; -> stay namespaced
# - Forgetting cross-browser tests on focus rings + reduced motion

# ===== Next steps =====
# - Container queries with @container in modern Sass
# - PostCSS pipelines (autoprefixer, cssnano) for production
# - CSS modules + Sass for component-scoped styles in frameworks
# - Design system docs via Storybook with the @storybook/preset-scss preset
# - WCAG colour contrast checks in CI (axe-core, pa11y)

# ===== Self-test =====
# If you can:
# 1) Read someone else's SCSS and predict the compiled CSS
# 2) Migrate a 1000-line legacy stylesheet from @import to modules in an afternoon
# 3) Justify each design decision in a token system to a designer
# you have completed the track. Ship the portfolio piece and call it done.

# ===== Track wrap-up =====
# Modern SCSS is a thin layer on top of CSS that pays for itself the moment
# your stylesheets become more than one file. The valuable bits are:
# - Modules (@use / @forward) for scope + clarity
# - Tokens as data for a maintainable design system
# - Mixins for shared layout / responsive logic
# - Functions for typed transforms (em-to-rem, token lookup)
# Use these four well and you stop fighting the cascade.

// /certificate/sass