Phase 5 — Outillage & production

#17 Sass & Autoprefixer

variables, imbrication, mixins, préfixes vendeur

Qu'est-ce que Sass ?

Sass (Syntactically Awesome Style Sheets) est un préprocesseur CSS qui ajoute des fonctionnalités puissantes : variables, imbrication, mixins, fonctions et plus. Les fichiers Sass (.scss) sont compilés en CSS standard.

Installation

Installer Sass et Autoprefixer

npm install sass autoprefixer postcss postcss-cli

Variables

Variables Sass

// _variables.scss
$color-primary: #3b82f6;
$color-text: #1a1a2e;
$spacing-md: 16px;
$radius: 8px;

// Utilisation
.button {
  background: $color-primary;
  padding: $spacing-md;
  border-radius: $radius;
}

Imbrication

Sélecteurs imbriqués

.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);
  }

  // Compile en :
  // .card { ... }
  // .card-header { ... }
  // .card-body { ... }
  // .card:hover { ... }
}

Mixins

Mixins réutilisables

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

Partiels et imports

Organisation des fichiers

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

Autoprefixer

Autoprefixer ajoute automatiquement les préfixes vendeurs à votre CSS pour qu'il fonctionne sur tous les navigateurs :

Avant / Après Autoprefixer

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

/* Après Autoprefixer */
.element {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-user-select: none;
  user-select: none;
}

Script de build

Scripts package.json

{
  "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"
  }
}

À vous de jouer

Essayez les commandes ci-dessous :

terminal — npm

Leçon 16Pseudo-éléments et pseudo-classes Leçon 18Architecture CSS