Phase 5 — Tooling & Production

#17 Sass & Autoprefixer

variables, nesting, mixins, vendor prefixes

What is Sass?

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that adds powerful features to CSS: variables, nesting, mixins, functions, and more. Sass files (.scss) are compiled into standard CSS.

Installation

Install Sass and Autoprefixer

npm install sass autoprefixer postcss postcss-cli

Variables

Sass variables

// _variables.scss
$color-primary: #3b82f6;
$color-text: #1a1a2e;
$spacing-md: 16px;
$radius: 8px;
$font-sans: "Inter", system-ui, sans-serif;

// Usage
.button {
  background: $color-primary;
  padding: $spacing-md;
  border-radius: $radius;
  font-family: $font-sans;
}

Nesting

Nested selectors

.card {
  border: 1px solid #e0dbd4;
  border-radius: $radius;

  &-header {
    padding: $spacing-md;
    border-bottom: 1px solid #e0dbd4;
  }

  &-body {
    padding: $spacing-md;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  // Compiles to:
  // .card { ... }
  // .card-header { ... }
  // .card-body { ... }
  // .card:hover { ... }
}

Mixins

Reusable mixins

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin respond-to($breakpoint) {
  @if $breakpoint == tablet {
    @media (min-width: 768px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

.hero {
  @include flex-center;
  min-height: 100vh;

  @include respond-to(tablet) {
    padding: 48px;
  }
}

Partials and imports

File organization

// File structure:
// styles/
//   _variables.scss
//   _mixins.scss
//   _base.scss
//   _components.scss
//   main.scss

// main.scss
@use "variables" as *;
@use "mixins" as *;
@use "base";
@use "components";

Autoprefixer

Autoprefixer automatically adds vendor prefixes to your CSS so it works across all browsers:

Before / After Autoprefixer

/* Your CSS */
.element {
  backdrop-filter: blur(10px);
  user-select: none;
  appearance: none;
}

/* After Autoprefixer */
.element {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Build script

package.json scripts

{
  "scripts": {
    "sass": "sass src/styles/main.scss dist/style.css --watch",
    "prefix": "postcss dist/style.css --use autoprefixer -o dist/style.css",
    "build:css": "sass src/styles/main.scss dist/style.css && npm run prefix"
  }
}

Your turn

Try the Sass and Autoprefixer commands below:

terminal — npm

Lesson 16Pseudo-elements and pseudo-classes Lesson 18CSS architecture