Lesson 1: What is SCSS Grid?

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 are writing your styles.

Think of SCSS as CSS with extra capabilities: everything you can do in CSS, you can do in SCSS, plus much more.

Basic Grid in SCSS

Here is 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.

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 cannot 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;
}

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 will 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