ReviseAlgo Logo

Modern CSS

SCSS Basics

Master SCSS (Sassy CSS) preprocessor foundations, covering nested selectors, parent referencing (&), mixins, variables, and compilation pipeline rules.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master writing CSS using the SCSS preprocessor. By the end of this topic, you will be able to:

  • Differentiate between standard CSS and preprocessed SCSS.
  • Nest selectors to match HTML hierarchies.
  • Reference parent selectors using the ampersand (&) operator.
  • Write reusable style blocks using mixins (@mixin and @include).
  • Apply variable rules to manage design constants.

2. Overview

SCSS (Sassy CSS) is a CSS preprocessor that extends standard CSS with features like variables, nested selectors, mixins, and inheritance. These features help you write cleaner, more maintainable code for large web applications. Before the browser can read it, SCSS code must be compiled into standard CSS.

3. Why This Topic Matters

SCSS improves your development workflow, but nesting selectors too deeply can cause performance issues:

  • The Inception Rule Nesting Trap: Nesting selectors too deeply (e.g. 5+ levels deep) makes your code difficult to read and generates overly specific CSS rules (like .main .sidebar ul li a span) that are hard to override. Best practice is to limit nesting to 3 levels.
  • Dynamic Easing Duplications: Using copy-pasted styles for UI animations increases stylesheet size. SCSS mixins allow you to define animations in a single place and reuse them across different components.

4. Real-World Analogy

Think of writing SCSS code like **using shorthand notes to write a book**:

  • Nesting: Storing notes inside folder hierarchies. Rather than writing "Chapter 1 page 5 title" repeatedly, you put the title page inside the Chapter 1 folder once.
  • Mixins (Templates): Creating stamp templates for common diagrams (e.g. warning layouts). Instead of drawing the diagram manually every time, you press the stamp on the page (include mixin).
  • The Compilation (Publisher): A publisher takes your shorthand notes and stamps, expands the abbreviations, and prints a standard, readable paperback book (compiled CSS).

5. Core Concepts

SCSS adds several features to standard CSS:

  • Selector Nesting: Allows you to nest selectors to match your HTML structure.
  • Parent Reference (&): References the parent selector in nested rules. Useful for styling hover states (&:hover) or appending modifier class names (&--dark).
  • Mixins: Reusable blocks of CSS code defined with @mixin and inserted using @include. They can accept arguments to customize styles.
  • Variables ($): Allow you to store reusable values (like colors or font sizes). Unlike CSS custom variables, SCSS variables are resolved during compilation and do not exist at runtime in the DOM.
Feature SCSS Syntax Compiled CSS Output
Nesting .card { p { color: blue; } } .card p { color: blue; }
Parent Operator .btn { &:hover { opacity: 0.8; } } .btn:hover { opacity: 0.8; }
BEM Nesting .menu { &__item { padding: 5px; } } .menu__item { padding: 5px; }

6. Syntax & API Reference

Below is a sample SCSS stylesheet showcasing variables, nesting, and mixins:

7. Visual Diagram

This diagram displays how the SCSS preprocessor compiles source files into standard CSS:

8. Live Example — Full Working Code

Below is a comparison showing raw SCSS input and the compiled CSS output the browser renders:

9. Interactive Playground

Try It Yourself Challenges:

  1. Add a new argument (e.g. $border-color) to the rounded-border mixin inside the SCSS code.
  2. Test what happens when you nest rules more than 4 levels deep, and look at the resulting CSS output.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Over-nesting (Inception Rule) Nesting selectors too deeply, resulting in overly specific CSS rules that are hard to override. .main { .sidebar { ul { li { a {...} } } } } Limit selector nesting to a maximum of 3 levels.
Confusing SCSS and CSS variable lifetimes Attempting to update SCSS variables dynamically using JavaScript in the browser. SCSS variables are resolved during compilation and do not exist at runtime. document.body.style.setProperty('$color', 'blue'); (fails) Use native CSS variables (--var-name) for dynamic runtime values.

11. Best Practices

  • Limit nesting to 3 levels: Avoid nesting selectors too deeply in SCSS. Keeping nesting levels shallow (3 levels max) keeps specificity scores low.
  • Use mixins for reusable style blocks: Use @mixin and @include to define and reuse common layout styling blocks across your stylesheet.
  • Use SCSS variables for static theme variables: Use SCSS variables (e.g. $font-stack) for theme variables that do not change at runtime. Use native CSS variables (e.g. --color-primary) for dynamic values like light/dark mode overrides.
  • Break stylesheets into modular imports: Break large stylesheets into smaller, modular SCSS files and use @import or @use to combine them during compilation.

12. Browser Compatibility

Browsers cannot read SCSS directly. SCSS code must be compiled into standard CSS before it is sent to the browser. Once compiled, the resulting CSS works in all browsers.

13. Interview Questions

🟢 Q1: What is the main difference between SCSS variables ($color) and native CSS custom properties (--color)?

Answer: SCSS variables are resolved by the preprocessor during compilation and are replaced with static values in the final CSS file. They do not exist at runtime in the browser. Native CSS variables exist in the DOM, can be accessed and modified dynamically using JavaScript, and inherit values down the element cascade.

14. Debugging Exercise

Identify and fix the compiler error in this SCSS stylesheet:

View Solution

Diagnosis: The variable $padding-value is referenced inside the mixin declaration but is defined locally inside the class rule afterward. Because the variable is declared out of scope and after the mixin call, the compiler throws an error. To fix this, define the variable before referencing it, or pass it as an argument to the mixin.

Fixed SCSS:

15. Practice Exercises

Exercise 1: Nested Button Palette

Build a button styling rule in SCSS. Use the parent operator `&` to nested selectors for hover and focus states, and compile the code to verify your changes.

16. Scenario-Based Challenge

The Legacy CSS stylesheet refactoring Challenge:

A project stylesheet contains 2,000 lines of repetitive CSS declarations with duplicate color values and sizing properties. This makes updating the design difficult. Propose an implementation plan using SCSS variables and nesting to modularize and clean up the stylesheet.

17. Quick Quiz

Q1: Which SCSS operator is used to reference the parent selector in nested rules?

A) $ (dollar sign)

B) & (ampersand)

C) @include

Answer: B — The ampersand (&) references the parent selector in nested SCSS rules.

18. Summary & Key Takeaways

  • • SCSS must be compiled into standard CSS before the browser can render it.
  • • Use the ampersand (&) operator in nested selectors to target hover, active, or modified states easily.

19. Cheat Sheet

Directive Preprocessor Compiler Action
@mixin name(...) { ... } Defines a reusable block of styling rules that can be shared across selectors.