Episode 1 — Fundamentals / 1.7 — Working With SASS
1.7 — Exercise Questions: Working With SASS
Practice questions for all nine subtopics in Section 1.7. Mix of conceptual, code-writing, and hands-on exercises. Try each without reopening the lesson files first.
How to use this material (instructions)
- Read lessons in order —
README.md, then1.7.a→1.7.iin sequence. - Answer closed-book first — write an answer (bullets or short code), then compare to the matching lesson.
- Hands-on drills — actually compile the SCSS snippets with
npx sass input.scss output.cssto verify. - Redo misses — retry the next day; mark weak subtopics.
- Interview prep — pair with
1.7-Interview-Questions.md.
1.7.a — What Is SASS (Q1–Q8)
Q1. What is a CSS preprocessor, and what problem does it solve?
Q2. Name five key features of SASS/SCSS.
Q3. What does "compilation" mean in the context of SASS? What is the input and what is the output?
Q4. Does the browser ever execute SCSS code? Explain why or why not.
Q5. Why is Dart Sass the recommended compiler today? What happened to Node Sass?
Q6. Name two other CSS preprocessors besides SASS. How does SASS compare in ecosystem size?
Q7. What is a source map, and how does it help during development?
Q8. A colleague says "SASS adds runtime overhead to the website." Is this correct? Explain.
1.7.b — SCSS vs SASS Syntax & Setup (Q9–Q15)
Q9. Compare SCSS and indented SASS syntax in three ways (braces, semicolons, CSS compatibility).
Q10. Why is any valid CSS file also valid SCSS, but not valid indented SASS?
Q11. Write the npm command to install dart-sass as a dev dependency.
Q12. Write a package.json script that watches src/scss/ and outputs to dist/css/.
Q13. What is the difference between sass (npm package) and node-sass? Which should you install?
Q14. Name two VS Code extensions that help with SCSS development.
Q15. Hands-on: Create a test.scss file with a variable and a nested selector. Compile it with npx sass test.scss test.css. Open test.css and verify the output.
1.7.c — Variables & Nesting (Q16–Q24)
Q16. Declare an SCSS variable for a font stack and use it in a body rule.
Q17. List the seven data types in SCSS with one example of each.
Q18. What is the difference between a global and local SCSS variable? Write an example.
Q19. What does the !default flag do? When is it useful?
Q20. Write SCSS that nests .card, .card-header, and .card-body selectors. Show the compiled CSS.
Q21. What does & refer to in nested SCSS? Write an example using &:hover and &--active.
Q22. Why is nesting deeper than 3 levels considered a bad practice?
Q23. Compare SCSS variables and CSS custom properties in a table with four differences.
Q24. Hands-on: Write SCSS that uses a $primary variable in a .btn class with &:hover using darken(). Compile and inspect the output CSS.
1.7.d — Partials & Imports (Q25–Q33)
Q25. What makes a file a "partial" in SCSS? What naming convention does it follow?
Q26. What happens if you try to compile a partial file directly?
Q27. Write the syntax for loading a partial with @use. How do you access its variables?
Q28. How does @use differ from @import in three specific ways?
Q29. What does @forward do? How is it different from @use?
Q30. What is an _index.scss file, and how does it simplify imports?
Q31. List the seven folders in the 7-1 pattern and describe what goes in each.
Q32. When would you simplify the 7-1 pattern, and what minimal folder structure would you use?
Q33. Hands-on: Create a _variables.scss partial with 3 variables. Create a main.scss that loads it with @use. Compile and verify the variables are resolved in the output.
1.7.e — Mixins (Q34–Q41)
Q34. Write a mixin called flex-center that sets display: flex, justify-content: center, and align-items: center. Include it in a .hero class.
Q35. Write a mixin with two arguments and a default value. Show how to call it with named arguments.
Q36. Explain what @content does inside a mixin. Write a breakpoint mixin that uses it.
Q37. Write a mixin for truncating text to a single line (overflow, text-overflow, white-space).
Q38. When should you use a mixin vs a function? Give one example of each.
Q39. When should you use a mixin vs @extend? Give three reasons to prefer mixins.
Q40. How do you organize mixins in a multi-file SCSS project using @use?
Q41. Hands-on: Write a responsive breakpoint mixin using a $breakpoints map and @content. Use it to change a .sidebar width at md and lg. Compile and verify the media queries.
1.7.f — Inheritance & Extends (Q42–Q48)
Q42. Write SCSS using @extend to share base button styles between .btn-primary and .btn-secondary. Show the compiled CSS.
Q43. What is a placeholder selector (%)? How does it differ from extending a regular class?
Q44. Explain the unexpected selector pitfall of @extend with an example.
Q45. Why does @extend fail inside a @media block? What should you use instead?
Q46. When is @extend with a placeholder a good choice over a mixin?
Q47. What happens when you chain extends — selector A extends B, which extends C?
Q48. Hands-on: Create three message variant classes (.msg-success, .msg-warning, .msg-error) that extend a %msg-base placeholder. Compile and verify the grouped selector output.
1.7.g — Functions & Operators (Q49–Q55)
Q49. Write a custom SCSS function that converts pixels to rem.
Q50. Why is math.div(100%, 3) used instead of 100% / 3 in modern Dart Sass?
Q51. List five arithmetic operators in SCSS with examples.
Q52. What is string interpolation (#{}) in SCSS? Give two use cases where it is required.
Q53. Name four built-in SCSS module namespaces (e.g., sass:math) and one function from each.
Q54. Write a function that calculates the width of a grid column given the column count and total columns.
Q55. Hands-on: Write a rem() function and use it to set font-size on h1, h2, and p. Compile and verify the rem values.
1.7.h — Control Directives (Q56–Q62)
Q56. Write an @if / @else conditional inside a mixin that outputs different background colors for 'light' and 'dark' themes.
Q57. What is the difference between @for $i from 1 through 5 and @for $i from 1 to 5?
Q58. Use @for to generate .mt-1 through .mt-6 utility classes where margin-top increases by 0.25rem.
Q59. Write an @each loop that iterates a map of color names and hex values to generate .bg-* classes.
Q60. When would you use @while instead of @for? What danger does @while carry?
Q61. Generate a responsive grid system using @each (for breakpoints) and @for (for columns). Show the expected compiled output for one breakpoint.
Q62. Hands-on: Create a $colors map with 5 entries. Use @each to generate .text-* and .bg-* classes. Compile and count the generated CSS rules.
1.7.i — Color Functions (Q63–Q70)
Q63. Use darken() and lighten() to create hover and active states for a button.
Q64. What is the difference between color.adjust() and color.scale()? When would you prefer color.scale()?
Q65. Use color.mix() to create a 50/50 blend of two colors. What does the weight parameter control?
Q66. Write SCSS that generates 5 shades of a base color as CSS custom properties using a loop and color.scale().
Q67. Why might colors generated with lighten() or color.scale() fail WCAG contrast requirements?
Q68. What is color.change() used for? How does it differ from color.adjust()?
Q69. Write a tint() function that mixes a color with white by a given percentage.
Q70. Hands-on: Pick a brand color. Use color.scale() in a loop to generate a 9-shade palette (100–900). Compile and paste the hex values into a contrast checker.
Practical Exercises (Q71–Q76)
Q71. Exercise: Set up a small project with the 7-1 folder structure. Create _variables.scss, _mixins.scss, _buttons.scss, and main.scss. Wire them together with @use and @forward. Compile successfully.
Q72. Exercise: Build a button component system with SCSS: a base mixin, three color variants generated from a map, hover/active states using color.scale(), and sizes (sm, md, lg) using a mixin with arguments.
Q73. Exercise: Create a responsive grid system with @for and @each: 12 columns, 3 breakpoints (sm, md, lg), generating classes like .col-md-6.
Q74. Exercise: Build a color palette generator: define 4 base colors in a map, generate 5 shades of each (100, 300, 500, 700, 900) as CSS custom properties. Output should be ~20 properties.
Q75. Exercise: Refactor a 200-line CSS file into SCSS: extract variables, create mixins for repeated patterns, split into partials, add nesting where appropriate (max 3 levels).
Q76. Exercise: Write a dark mode theme using SCSS maps and @each. Generate CSS custom properties for both :root (light) and [data-theme="dark"] (dark) from a single configuration map.
Answer hints
(Short reminders — expand in your own words when studying.)
| Q | Hint |
|---|---|
| Q1 | Tool that adds features to CSS (variables, logic, nesting) and compiles to plain CSS |
| Q2 | Variables, nesting, mixins, functions, partials/imports, operators, control flow |
| Q3 | Input: .scss files; Output: .css files; compiler resolves all SASS features |
| Q4 | No — browsers only receive compiled CSS; SCSS is a build-time tool |
| Q5 | Node Sass wraps deprecated LibSass (C++); Dart Sass is actively maintained |
| Q8 | Incorrect — SASS compiles to CSS at build time; zero runtime cost |
| Q10 | SCSS uses { } and ; like CSS; indented syntax uses whitespace — CSS has braces |
| Q11 | npm install --save-dev sass |
| Q13 | sass = Dart Sass (maintained); node-sass = LibSass wrapper (deprecated) |
| Q17 | Number, String, Color, Boolean, Null, List, Map |
| Q19 | Sets value only if variable is not already defined — lets library users override defaults |
| Q22 | Produces long selectors → high specificity → hard to override → tightly couples CSS to HTML |
| Q23 | Compile-time vs runtime, no cascade vs cascade, SCSS-only vs CSS+JS accessible |
| Q25 | Starts with _ (e.g. _variables.scss); not compiled alone |
| Q28 | Namespacing, single-load guarantee, no global pollution |
| Q31 | abstracts, base, components, layout, pages, themes, vendors |
| Q36 | @content injects the block passed between { } after @include |
| Q39 | Arguments, @content blocks, works in media queries |
| Q43 | %name never appears in compiled CSS alone — only exists to be extended |
| Q45 | Extend groups selectors; cannot cross @media scope — use mixin instead |
| Q50 | / is deprecated for division in Dart Sass; math.div() is the replacement |
| Q52 | In selectors (.col-#{$i}), in property names (margin-#{$side}) |
| Q57 | through includes the end value; to excludes it |
| Q60 | When stop condition is computed dynamically; danger: infinite loop if condition never false |
| Q64 | adjust shifts by fixed amount; scale shifts proportionally toward min/max |
| Q65 | Weight is % of first color; mix($a, $b, 50%) = equal blend |
| Q67 | Lightening/darkening can create pairs that fall below 4.5:1 contrast ratio |
| Q68 | Sets a channel to an exact value rather than shifting it |
← Back to 1.7 — Working With SASS (README)