Compilation & Outils

Transformer ton SCSS en CSS optimisé pour la production.

Imagine : tu as créé des parchemins magiques remplis de sorts puissants (ton code SCSS), mais pour que ces sorts agissent dans le monde réel, tu dois les traduire dans un langage que les esprits du web (les navigateurs) comprennent. La compilation SCSS, c'est ce processus de traduction qui transforme tes sorts élaborés en formules CSS que tous les navigateurs peuvent exécuter.

12.1Qu'est-ce que la compilation ?

La compilation, c'est le processus qui transforme ton code SCSS en CSS standard. Les navigateurs ne comprennent que le CSS classique, donc il faut "traduire" toutes tes fonctionnalités avancées :

// TON CODE SCSS
$primary-color: #3498db;

.button {
  background: $primary-color;
  padding: 1rem;
  
  &:hover {
    background: darken($primary-color, 10%);
  }
  
  @include shadow(2);
}

Devient en CSS compilé :

/* CSS COMPILÉ */
.button {
  background: #3498db;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button:hover {
  background: #2980b9;
}

12.2Dart Sass : le compilateur officiel

Dart Sass est le compilateur officiel et le plus à jour. Il supporte toutes les fonctionnalités modernes et est constamment mis à jour :

# Installation via npm
npm install -g sass

# Compilation basique
sass input.scss output.css

# Compilation avec watch (surveillance des fichiers)
sass --watch input.scss:output.css

# Compilation d'un dossier entier
sass --watch scss/:css/

Options de compilation utiles :

# Style de sortie compressé (production)
sass --style=compressed input.scss output.css

# Avec source maps pour le debugging
sass --source-map input.scss output.css

# Surveillance avec style compressé
sass --watch --style=compressed scss/:css/

12.3Configuration avec Vite

Vite est un outil de build moderne qui gère SCSS nativement. Configuration super simple :

# Installation
npm create vite@latest mon-projet
cd mon-projet
npm install

# Ajouter le support SCSS
npm install -D sass

Vite détecte automatiquement les fichiers .scss et les compile à la volée :

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // Variables globales disponibles partout
        additionalData: `@use 'src/styles/abstracts/variables' as *;`
      }
    }
  }
})

12.4Webpack et sass-loader

Si tu utilises Webpack, le sass-loader s'occupe de la compilation :

# Installation des dépendances
npm install -D sass-loader sass webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          'style-loader',    // Injecte le CSS dans le DOM
          'css-loader',      // Interprète @import et url()
          'sass-loader'      // Compile SCSS vers CSS
        ]
      }
    ]
  }
}

12.5Outils de développement

Les bons outils font toute la différence pour un workflow fluide :

Extensions VS Code

Sass (.sass only) : Coloration syntaxique pour .sass
SCSS IntelliSense : Autocomplétion pour variables et mixins
Live Sass Compiler : Compilation en temps réel
Sass Formatter : Formatage automatique du code

Configuration EditorConfig

# .editorconfig
root = true

[*.{scss,sass}]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

12.6Linting avec Stylelint

Stylelint vérifie la qualité de ton code SCSS et détecte les erreurs :

# Installation
npm install -D stylelint stylelint-scss stylelint-config-standard-scss

# Vérification des fichiers
npx stylelint "**/*.scss"

# Correction automatique
npx stylelint "**/*.scss" --fix

// .stylelintrc.json
{
  "extends": [
    "stylelint-config-standard-scss"
  ],
  "rules": {
    "indentation": 2,
    "selector-max-nesting-depth": 3,
    "scss/at-mixin-pattern": "^[a-z][a-zA-Z0-9]*$",
    "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]*(-[a-z][a-zA-Z0-9]*)*$"
  }
}

12.7Source Maps pour le debugging

Les source maps te permettent de voir ton code SCSS original dans les DevTools du navigateur :

# Génération avec Dart Sass
sass --source-map input.scss output.css

# Le fichier .map est créé automatiquement
# output.css.map

Avec les source maps activées, quand tu inspectes un élément dans le navigateur, tu vois :

Comparaison

Sans source map : styles.css:1247

Avec source map : _buttons.scss:23

12.8Optimisation pour la production

En production, tu veux un CSS optimisé et léger :

# Compilation minifiée
sass --style=compressed --no-source-map src/styles/:dist/css/

# Avec PostCSS pour autoprefixer
npm install -D postcss autoprefixer cssnano

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),  // Ajoute les préfixes automatiquement
    require('cssnano')        // Minification avancée
  ]
}

12.9Workflow complet avec npm scripts

Configure des scripts npm pour automatiser ton workflow :

// package.json
{
  "scripts": {
    "scss:dev": "sass --watch --source-map src/scss/:dist/css/",
    "scss:build": "sass --style=compressed --no-source-map src/scss/:dist/css/",
    "scss:lint": "stylelint 'src/**/*.scss'",
    "scss:fix": "stylelint 'src/**/*.scss' --fix",
    "build": "npm run scss:lint && npm run scss:build",
    "dev": "concurrently 'npm run scss:dev' 'live-server dist'"
  }
}

# Commandes disponibles
npm run dev          # Mode développement avec watch
npm run build        # Build de production
npm run scss:lint    # Vérification du code
npm run scss:fix     # Correction automatique

12.10Gestion des erreurs de compilation

Les erreurs de compilation SCSS sont généralement explicites. Voici les plus courantes :

// ❌ Erreur : Variable non définie
.button {
  color: $primary-color; // Error: Undefined variable.
}

// ❌ Erreur : Mixin non trouvé
.card {
  @include shadow; // Error: Undefined mixin.
}

// ❌ Erreur : Import introuvable
@use 'non-existent'; // Error: Can't find stylesheet.

// ❌ Erreur : Syntaxe invalide
.element {
  color #red;  // Error: Expected ":".
}

Les messages d'erreur indiquent généralement :

Le fichier où se trouve l'erreur
La ligne et colonne exacte
Une description du problème
Un contexte autour de l'erreur

12.11Performance et monitoring

Surveille les performances de compilation sur gros projets :

# Analyse du temps de compilation
time sass large-project.scss output.css

# Analyse de la taille finale
ls -lh output.css

# Analyse des selectors avec tools comme PurgeCSS
npm install -D @fullhuman/postcss-purgecss

Conseil

Sur de gros projets, divise tes fichiers SCSS intelligemment et utilise des imports conditionnels pour éviter de recompiler tout le projet à chaque modification.

12.12Déploiement et CI/CD

Intègre la compilation SCSS dans ton pipeline de déploiement :

# .github/workflows/build.yml
name: Build and Deploy
on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Lint SCSS
      run: npm run scss:lint
      
    - name: Build CSS
      run: npm run scss:build
      
    - name: Deploy
      run: npm run deploy

Félicitations !

Tu maîtrises maintenant SCSS de A à Z ! De la syntaxe de base aux outils de production, tu as toutes les cartes en main pour créer des feuilles de style maintenables et performantes. N'hésite pas à expérimenter et à adapter ces techniques à tes projets personnels !