What is SCSS and Why Use It?

What is SCSS?

SCSS is the most popular syntax of Sass, a CSS preprocessor. It adds variables, nesting, mixins, and functions to CSS, then compiles to regular CSS.

Variables

$primary: #2563eb;
$spacing: 16px;

.button {
  background: $primary;
  padding: $spacing;
}

Nesting

.card {
  padding: 20px;
  .title { font-size: 24px; }
  &:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
}

Why Use SCSS?

• Variables — reuse colors/spacing, change once.
• Nesting — mirror your HTML structure.
• Mixins — reusable style blocks.
• Partials & imports — organise styles into files.

FAQs

SCSS vs Sass?

Same tool, two syntaxes. SCSS uses braces/semicolons (CSS-like); Sass uses indentation. SCSS is more popular. More in our SCSS guides.

Do browsers run SCSS?

No — it compiles to CSS first.