Sass & SCSS

/* CSS traditionnel */
.header { background: #cf649a; }
.header__title {
  color: white;
  font-size: 2rem;
}
.header__subtitle {
  color: rgba(255,255,255,0.8);
  font-size: 1.2rem;
}

.button {
  background: #cf649a;
  padding: 8px 16px;
  border-radius: 4px;
}
.button:hover {
  background: #b85588;
}

// Sass - Syntaxe indentée
$primary: #cf649a
$primary-dark: darken($primary, 10%)

.header
  background: $primary

  &__title
    color: white
    font-size: 2rem

  &__subtitle
    color: rgba(white, 0.8)
    font-size: 1.2rem

=button-style($bg, $padding: 8px 16px)
  background: $bg
  padding: $padding
  border-radius: 4px

  &:hover
    background: darken($bg, 10%)

.button
  +button-style($primary)

// SCSS - Syntaxe CSS étendue
$primary: #cf649a;
$primary-dark: darken($primary, 10%);

.header {
  background: $primary;

  &__title {
    color: white;
    font-size: 2rem;
  }

  &__subtitle {
    color: rgba(white, 0.8);
    font-size: 1.2rem;
  }
}

@mixin button-style($bg, $padding: 8px 16px) {
  background: $bg;
  padding: $padding;
  border-radius: 4px;

  &:hover {
    background: darken($bg, 10%);
  }
}

.button {
  @include button-style($primary);
}

Processus de compilation

$primary: #cf649a;

.card {
  background: $primary;
  padding: 1rem;

  &:hover {
    background: darken($primary, 10%);
  }
}

.card {
  background: #cf649a;
  padding: 1rem;
}

.card:hover {
  background: #b85588;
}

Le navigateur ne voit que du CSS classique.

Comparaison des syntaxes

// Variables
$primary-color: #cf649a
$font-size-large: 1.5rem
$border-radius: 8px

// Nesting
.card
  background: white
  padding: 1rem
  border-radius: $border-radius

  .title
    color: $primary-color
    font-size: $font-size-large
    margin-bottom: 0.5rem

  .content
    color: #666
    line-height: 1.6

  &:hover
    transform: translateY(-2px)
    box-shadow: 0 4px 15px rgba(0,0,0,0.1)

// Variables
$primary-color: #cf649a;
$font-size-large: 1.5rem;
$border-radius: 8px;

// Nesting
.card {
  background: white;
  padding: 1rem;
  border-radius: $border-radius;

  .title {
    color: $primary-color;
    font-size: $font-size-large;
    margin-bottom: 0.5rem;
  }

  .content {
    color: #666;
    line-height: 1.6;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
}

Variables

// Types de variables Sass/SCSS
$primary-color: #cf649a;       // Couleur
$font-size: 16px;              // Taille
$font-family: 'Arial', sans-serif; // Police
$border-width: 2px;            // Nombre
$is-rounded: true;             // Booléen
$margin-sizes: 10px 15px 20px; // Liste
$font-weights: (
  light: 300,
  normal: 400,
  bold: 700
);                             // Map

// Utilisation
.button {
  color: $primary-color;
  font-size: $font-size;
  font-family: $font-family;
  border: $border-width solid $primary-color;
  border-radius: if($is-rounded, 8px, 0);
  font-weight: map-get($font-weights, bold);
}

Nesting (imbrication)

// SCSS avec nesting
.navbar {
  background: $primary-color;
  padding: 1rem;

  // Élément enfant
  .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
  }

  // Liste de navigation
  .nav-list {
    list-style: none;
    display: flex;
    gap: 1rem;

    .nav-item {
      padding: 0.5rem 1rem;

      a {
        color: white;
        text-decoration: none;

        &:hover {
          color: lighten($primary-color, 20%);
        }
      }
    }
  }

  // Pseudo-sélecteurs avec &
  &:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  // Modificateurs avec &
  &--dark {
    background: darken($primary-color, 20%);
  }
}

Mixins

// Définition de mixins
@mixin button-style($bg: $primary-color, $padding: 12px 24px) {
  background: $bg;
  color: white;
  padding: $padding;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;

  &:hover {
    background: darken($bg, 10%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba($bg, 0.3);
  }

  &:active {
    transform: translateY(0);
  }
}

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

@mixin media-query($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 767px) { @content; }
  }
  @if $breakpoint == tablet {
    @media (min-width: 768px) and (max-width: 1023px) { @content; }
  }
  @if $breakpoint == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

// Utilisation des mixins
.btn-primary {
  @include button-style($primary-color, 16px 32px);
}

.btn-secondary {
  @include button-style($secondary-color);
}

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

  @include media-query(mobile) {
    height: 50vh;
    flex-direction: column;
  }
}

Fonctions

// Fonctions Sass intégrées
$primary: #cf649a;

.element {
  // Manipulation de couleurs
  background: $primary;
  border: 1px solid darken($primary, 15%);
  color: lighten($primary, 40%);

  &:hover {
    background: saturate($primary, 20%);
  }

  &:active {
    background: desaturate($primary, 10%);
  }
}

// Fonctions personnalisées
@function rem($pixels) {
  @return #{$pixels / 16}rem;
}

@function color-contrast($color) {
  @if (lightness($color) > 50%) {
    @return #000;
  } @else {
    @return #fff;
  }
}

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

// Utilisation des fonctions personnalisées
.card {
  font-size: rem(18);
  padding: rem(16) rem(24);
  background: $primary;
  color: color-contrast($primary);
}

// Fonctions de liste et map
$breakpoints: (
  small: 480px,
  medium: 768px,
  large: 1024px
);

@function breakpoint($size) {
  @return map-get($breakpoints, $size);
}

.responsive-container {
  width: 100%;

  @media (min-width: breakpoint(medium)) {
    max-width: 1200px;
  }
}

// Exemples d'utilisation
font-size: rem(18); // 1.125rem
color: color-contrast(#cf649a); // #fff
width: strip-unit(100px); // 100
breakpoint: breakpoint(medium); // 768px

scss/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   ├── _functions.scss
│   └── _placeholders.scss
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _utilities.scss
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│   ├── _forms.scss
│   └── _navigation.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   ├── _sidebar.scss
│   └── _grid.scss
├── pages/
│   ├── _home.scss
│   ├── _about.scss
│   └── _contact.scss
├── themes/
│   ├── _light.scss
│   └── _dark.scss
├── vendors/
│   ├── _bootstrap.scss
│   └── _jquery-ui.scss
└── main.scss

// main.scss - Point d'entrée

// 1. Abstracts
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'abstracts/placeholders';

// 2. Vendors
@import 'vendors/bootstrap';

// 3. Base
@import 'base/reset';
@import 'base/typography';
@import 'base/utilities';

// 4. Layout
@import 'layout/header';
@import 'layout/navigation';
@import 'layout/sidebar';
@import 'layout/footer';

// 5. Components
@import 'components/buttons';
@import 'components/forms';
@import 'components/cards';

// 6. Pages
@import 'pages/home';
@import 'pages/about';

// 7. Themes
@import 'themes/light';
@import 'themes/dark';

Méthodologies & conventions

• BEM + Sass

  BEM (Block Element Modifier) avec la puissance du nesting Sass.

  scss

  // BEM avec Sass
  .card {
    // Block
    background: white;
    border-radius: 8px;
  
    // Elements
    &__header {
      padding: 1rem;
      border-bottom: 1px solid #eee;
    }
  
    &__title {
      font-size: 1.25rem;
      font-weight: bold;
    }
  
    &__content {
      padding: 1rem;
    }
  
    // Modifiers
    &--featured {
      border: 2px solid $primary;
    }
  
    &--large {
      .card__title {
        font-size: 1.5rem;
      }
    }
  }

• SMACSS

  SMACSS organise le CSS en 5 catégories distinctes.

  scss

  // SMACSS Categories
  
  // Base Rules
  body, h1, p { margin: 0; }
  
  // Layout Rules
  .l-header { /* layout */ }
  .l-sidebar { /* layout */ }
  
  // Module Rules
  .btn { /* component */ }
  .card { /* component */ }
  
  // State Rules
  .is-hidden { display: none; }
  .is-active { /* state */ }
  
  // Theme Rules
  .theme-dark {
    .btn { background: #333; }
  }

• ITCSS

  ITCSS structure le CSS du plus générique au plus spécifique.

  scss

  // ITCSS Triangle inversé
  
  // 1. Settings (variables)
  $primary: #cf649a;
  
  // 2. Tools (mixins/functions)
  @mixin button() { /* */ }
  
  // 3. Generic (reset, normalize)
  * { box-sizing: border-box; }
  
  // 4. Elements (HTML elements)
  h1 { font-size: 2rem; }
  
  // 5. Objects (layout patterns)
  .o-container { /* */ }
  
  // 6. Components (UI components)
  .c-button { /* */ }
  
  // 7. Utilities (helpers)
  .u-hidden { display: none; }

Outils et build process

• CLI Sass (Dart Sass)

  Copier

  bash

  # Installation
  npm install -g sass
  
  # Compilation simple
  sass input.scss output.css
  
  # Watch mode
  sass --watch src/scss:dist/css
  
  # Production (compressed)
  sass --style compressed --no-source-map input.scss output.css

• Webpack + sass-loader

  Copier

  js

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    }
  };

• Configuration

  Copier

  json

  {
    "scripts": {
      "sass:dev": "sass --watch src/scss:dist/css --style expanded",
      "sass:prod": "sass src/scss:dist/css --style compressed --no-source-map",
      "sass:build": "npm run sass:prod"
    },
    "devDependencies": {
      "sass": "^1.x.x"
    }
  }

1. Exercice 1 : design system avec Sass

   Créez un design system complet.

   Objectifs

   • Définir des variables pour couleurs, tailles, espacements
   • Créer des mixins pour boutons, cards, layouts
   • Utiliser le nesting pour l’organisation
   • Implémenter des fonctions utilitaires
   • Structure modulaire avec @import
   • Thèmes clair/sombre

   Structure de départ

   Copier

   scss

   // _variables.scss
   $primary: #cf649a;
   $secondary: #3b82f6;
   $success: #10b981;
   
   $space-xs: 0.25rem;
   $space-sm: 0.5rem;
   $space-md: 1rem;
   
   $breakpoints: (
     mobile: 480px,
     tablet: 768px,
     desktop: 1024px
   );
   
   // _mixins.scss
   @mixin button($bg: $primary) {
     // Votre code ici
   }
   
   @mixin card($padding: $space-md) {
     // Votre code ici
   }
   
   // main.scss
   @import 'variables';
   @import 'mixins';
   @import 'components';

   Conseils

   Commencez par définir vos variables de base, puis créez des mixins réutilisables. Utilisez les fonctions Sass pour manipuler les couleurs et créer des variantes automatiquement.

2. Exercice 2 : site responsive avec SCSS

   Site adaptatif avec architecture Sass.

   Fonctionnalités requises

   • Header responsive avec navigation
   • Grille de produits adaptative
   • Footer avec liens sociaux
   • Animations CSS3
   • Mixins pour breakpoints
   • Organisation BEM + Sass
   • Dark mode avec variables

   Mixins utiles

   Copier

   scss

   // Breakpoints mixin
   @mixin respond-to($breakpoint) {
     @if $breakpoint == mobile {
       @media (max-width: 767px) {
         @content;
       }
     }
     @if $breakpoint == tablet {
       @media (min-width: 768px) {
         @content;
       }
     }
   }
   
   // Grid mixin
   @mixin grid($cols, $gap: 1rem) {
     display: grid;
     grid-template-columns: repeat($cols, 1fr);
     gap: $gap;
   
     @include respond-to(mobile) {
       grid-template-columns: 1fr;
     }
   }
   
   // Animation mixin
   @mixin animate($property: all, $duration: 0.3s) {
     transition: $property $duration ease;
   }

3. Exercice 3 : framework CSS personnalisé

   Créez votre propre micro-framework.

   Composants à développer

   • Composants UI : boutons (variants, tailles), cards (styles, layouts), forms (inputs, validations), navigation (menu, breadcrumb)
   • Système de layout : grille flexible, conteneurs responsives, utilitaires spacing, flexbox helpers
   • Utilitaires : classes de couleurs, helpers typographie, états (show/hide), animations

   Génération automatique de classes

   Copier

   scss

   // Exemple de génération automatique
   $spacings: (1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem);
   
   @each $name, $value in $spacings {
     .p-#{$name} { padding: $value; }
     .m-#{$name} { margin: $value; }
   }
   
   // Génère: .p-1, .p-2, .m-1, .m-2, etc.

   Challenge bonus

   Créez un système de génération automatique de classes utilitaires (comme Tailwind) en utilisant les boucles Sass et les maps.

Les autres pages CSS

• Les bases du CSS

  Syntaxe, sélecteurs, modèle de boîte

  Ouvrir le cours
• Variables CSS

  Custom properties et theming

  Ouvrir le cours
• CSS avancé

  Container queries, transforms 3D

  Ouvrir le cours
• Google Fonts

  Typographie web

  Ouvrir le cours