# Sass/SCSS at a Glance — CSS

Source: https://www.geekswithgeeks.com/en/css/css-sass-scss

> A CSS preprocessor: variables, nesting, and mixins that compile to plain CSS.

## What Sass adds

**Sass/SCSS** is a superset of CSS that adds variables (`$name`), nested rules, mixins (reusable blocks), and math — then compiles down to plain CSS the browser understands.

## Variables & nesting

Nesting mirrors your HTML structure instead of repeating parent selectors.

```scss
$brand-color: #264de4;

.card {
  border: 1px solid #ddd;

  .title {
    color: $brand-color;
    font-weight: bold;
  }
}
```

## Mixins

A `@mixin` bundles reusable declarations; `@include` inserts them, with arguments.

```scss
@mixin flex-center($gap: 8px) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: $gap;
}

.toolbar {
  @include flex-center(12px);
}
```

## It's still just CSS in the end

Sass needs a build step (via a bundler or the `sass` CLI) to compile `.scss` into `.css` — browsers can't read Sass directly.