Lesson 1: What is SCSS Grid?

Learn how SCSS makes CSS Grid more powerful with variables, nesting, and mixins.

What is SCSS?

SCSS (Sassy CSS) is a preprocessor that extends CSS with programming features. It compiles down to regular CSS that browsers can understand, but gives you powerful tools like variables, nesting, mixins, and functions while you're writing your styles.

Think of SCSS as "CSS with superpowers" - everything you can do in CSS, you can do in SCSS, plus much more.

💡 Key Point:

SCSS uses the exact same CSS Grid syntax, but adds variables and mixins to make it reusable and maintainable. If you know CSS Grid, you already know SCSS Grid!

Basic Grid in SCSS

Here's a simple grid layout in SCSS - notice it looks identical to CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

This is valid SCSS! But SCSS becomes powerful when you add variables...

Using Variables for Grid Properties

Instead of hardcoding values, use variables with the $ symbol:

// Define variables at the top
$grid-columns: 3;
$grid-gap: 20px;

.container {
  display: grid;
  grid-template-columns: repeat($grid-columns, 1fr);
  gap: $grid-gap;
}

Now you can change $grid-columns in one place and it updates everywhere!

Why Variables Matter

Imagine you have a design system with consistent spacing:

// Design system variables
$spacing-xs: 8px;
$spacing-sm: 16px;
$spacing-md: 24px;
$spacing-lg: 32px;

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $spacing-md;  // Easy to read and change!
}

.article-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: $spacing-lg;  // Consistent spacing
}

If your designer says "make all medium spacing 32px instead of 24px", you change ONE variable and it updates everywhere.

✅ Real-World Benefit:

Variables make it easy to maintain consistent spacing, colors, and layouts across large projects. Change once, update everywhere!

SCSS Comments

SCSS supports both CSS comments and special SCSS-only comments:

/* CSS comment - appears in compiled CSS */

// SCSS comment - removed when compiled
// Perfect for notes to yourself!

$grid-gap: 24px; // Inline comments work too

Common Grid Variables

Here are typical variables you might use for grids:

// Column counts
$grid-cols-mobile: 1;
$grid-cols-tablet: 2;
$grid-cols-desktop: 3;

// Spacing
$grid-gap-tight: 8px;
$grid-gap-normal: 16px;
$grid-gap-loose: 32px;

// Common widths
$sidebar-width: 250px;
$content-max-width: 1200px;

Compiling SCSS to CSS

Browsers can't read SCSS directly - it must be compiled to CSS. When you write:

// SCSS
$gap: 20px;

.grid {
  display: grid;
  gap: $gap;
}

It compiles to regular CSS:

/* Compiled CSS */
.grid {
  display: grid;
  gap: 20px;
}

⚙️ How to Compile:

Most modern tools compile SCSS automatically:

• Vite, Webpack, Parcel (bundlers)
• VS Code extensions (Live Sass Compiler)
• Build tools (Gulp, npm scripts)

SCSS vs Regular CSS for Grid

Regular CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sidebar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;  /* Same value repeated! */
}

SCSS with Variables:

$default-columns: 3;
$default-gap: 24px;

.container {
  display: grid;
  grid-template-columns: repeat($default-columns, 1fr);
  gap: $default-gap;
}

.sidebar {
  display: grid;
  grid-template-columns: repeat($default-columns, 1fr);
  gap: $default-gap;  // DRY - Don't Repeat Yourself!
}

Next Lessons Preview

In the next lessons, you'll learn:

Lesson 2: Nesting grid styles inside parent selectors
Lesson 3: Creating reusable grid mixins
Level 2: Advanced SCSS features for dynamic grids
Level 3: Building complete grid systems with SCSS

📚 Lesson 1: What is SCSS Grid?