Aller au contenu principal

Module SCSS.2 – Syntaxe SCSS

Objectif​

Maîtriser la syntaxe SCSS fondamentale : nesting, variables, partials pour écrire du SCSS propre et organisé.

Théorie​

Variables SCSS​

Déclaration :

$primary-color: #007bff;
$spacing: 1rem;
$font-family: 'Roboto', sans-serif;

Utilisation :

.button {
    background-color: $primary-color;
    padding: $spacing;
    font-family: $font-family;
}

Portée :

$global: blue; // Globale

.container {
    $local: red; // Locale au container
    
    .element {
        color: $local; // Accès à la locale
    }
}

Types de variables :

// Couleurs
$primary: #007bff;
$secondary: #6c757d;

// Nombres
$spacing: 1rem;
$border-radius: 5px;

// Strings
$font-family: 'Roboto', sans-serif;

// Booléens
$enable-shadows: true;

// Lists
$colors: red, blue, green;
$spacings: 10px, 20px, 30px;

// Maps
$theme-colors: (
    primary: #007bff,
    secondary: #6c757d,
    success: #28a745
);

Interpolation :

$property: color;
$value: blue;

.element {
    #{$property}: $value; // color: blue;
}

Nesting (Imbrication)​

Nesting de base :

.nav {
    background-color: white;
    
    ul {
        list-style: none;
        
        li {
            display: inline-block;
            
            a {
                color: blue;
                
                &:hover {
                    color: red;
                }
            }
        }
    }
}

Compilé en CSS :

.nav {
    background-color: white;
}

.nav ul {
    list-style: none;
}

.nav ul li {
    display: inline-block;
}

.nav ul li a {
    color: blue;
}

.nav ul li a:hover {
    color: red;
}

Ampersand (&) :

.button {
    background-color: blue;
    
    &:hover {
        background-color: darkblue;
    }
    
    &:active {
        background-color: navy;
    }
    
    &--primary {
        background-color: green;
    }
    
    &__icon {
        margin-right: 10px;
    }
}

Compilé :

.button { }
.button:hover { }
.button:active { }
.button--primary { }
.button__icon { }

Nesting de propriétés :

.element {
    font: {
        family: 'Roboto', sans-serif;
        size: 1rem;
        weight: bold;
    }
    
    border: {
        width: 2px;
        style: solid;
        color: blue;
    }
}

Compilé :

.element {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    border-width: 2px;
    border-style: solid;
    border-color: blue;
}

⚠️ Attention : Ne pas abuser du nesting (max 3-4 niveaux).

Partials et Imports​

Partials = Fichiers SCSS préfixés par _ qui ne sont pas compilés seuls.

Créer un partial :

// _variables.scss
$primary-color: #007bff;
$spacing: 1rem;

Importer un partial :

// main.scss
@import 'variables'; // Pas besoin du _ ni .scss
@import 'mixins';
@import 'components';

Ordre d'import :

// 1. Variables (utilisées partout)
@import 'variables';

// 2. Mixins (peuvent utiliser variables)
@import 'mixins';

// 3. Base
@import 'base';

// 4. Components (utilisent variables et mixins)
@import 'components';

Structure recommandée :

scss/
├── _variables.scss
├── _mixins.scss
├── _base.scss
├── _components.scss
└── main.scss

Commentaires​

Commentaires SCSS :

// Commentaire sur une ligne (non compilé)

/* Commentaire multi-lignes (compilé en CSS) */

/*!
 * Commentaire important (toujours compilé)
 */

Commentaires dans le CSS compilé :

  • // : Non compilé (supprimé)
  • /* */ : Compilé en CSS
  • /*! */ : Toujours compilé (même en mode compressed)

Opérateurs​

Mathématiques :

$width: 1000px;
$sidebar: 250px;

.main {
    width: $width - $sidebar; // 750px
    padding: 10px * 2;        // 20px
    margin: 100% / 3;          // 33.333%
}

Opérateurs :

  • + : Addition
  • - : Soustraction
  • * : Multiplication
  • / : Division
  • % : Modulo

Attention avec / :

// Division nécessite des parenthèses ou variables
width: (100% / 3); // OK
width: $width / 3;  // OK
width: 100% / 3;    // Interprété comme séparateur

Comparaison :

@if $value > 10 {
    // ...
}

Concaténation de strings :

$prefix: 'icon-';
$name: 'home';

.#{$prefix}#{$name} { } // .icon-home

Interpolation​

Interpolation de variables :

$name: 'button';
$modifier: 'primary';

.#{$name}--#{$modifier} { } // .button--primary

Interpolation dans les propriétés :

$property: 'margin';
$side: 'top';

#{$property}-#{$side}: 10px; // margin-top: 10px;

Exercices guidés​

Exercice 1 : Variables​

Créez un fichier _variables.scss avec :

  • Couleurs principales
  • Espacements
  • Tailles de police
  • Utilisez-les dans vos styles

Exercice 2 : Nesting​

Créez un composant avec nesting :

  • .card avec .card__title, .card__body
  • Utilisez & pour les modifiers
  • Testez le nesting de propriétés

Exercice 3 : Partials​

Organisez votre SCSS :

  • _variables.scss
  • _base.scss
  • main.scss avec imports

Exercice 4 : Opérateurs​

Utilisez les opérateurs :

  • Calculs de largeurs
  • Espacements calculés
  • Pourcentages

Exercice 5 : Interpolation​

Créez des classes dynamiques :

  • Avec interpolation de variables
  • Classes générées automatiquement

❌ Erreurs fréquentes​

Erreur 1 : Nesting trop profond​

❌ Mauvais :

.nav {
    ul {
        li {
            a {
                span {
                    strong { } // Trop profond
                }
            }
        }
    }
}

✅ Bon :

.nav {
    ul {
        list-style: none;
    }
    
    a {
        color: blue;
    }
}

Pourquoi : Nesting profond = CSS trop spécifique.

Erreur 2 : Oublier le & pour les pseudo-classes​

❌ Mauvais :

.button {
    :hover { } // .button :hover (descendant)
}

✅ Bon :

.button {
    &:hover { } // .button:hover
}

Pourquoi : & référence le parent.

Erreur 3 : Variables non définies​

❌ Mauvais :

.element {
    color: $undefined-variable;
}

✅ Bon :

$color: blue;

.element {
    color: $color;
}

Pourquoi : Variables doivent être définies avant utilisation.

Erreur 4 : Import dans le mauvais ordre​

❌ Mauvais :

@import 'components'; // Utilise $primary-color
@import 'variables';  // Définit $primary-color (trop tard)

✅ Bon :

@import 'variables';  // Définit d'abord
@import 'components'; // Utilise ensuite

Pourquoi : Variables doivent être définies avant utilisation.

Erreur 5 : Division sans parenthèses​

❌ Mauvais :

width: 100% / 3; // Interprété comme séparateur

✅ Bon :

width: (100% / 3); // Division

Pourquoi : / peut être interprété comme séparateur CSS.

🚀 Mini-projet​

Mission : Créer une structure SCSS organisée

Créez un projet SCSS avec :

Structure :

  • _variables.scss : Toutes les variables
  • _base.scss : Styles de base
  • _components.scss : Composants
  • main.scss : Fichier principal avec imports

Fonctionnalités :

  • Variables pour couleurs, espacements, typographie
  • Nesting approprié (max 3 niveaux)
  • Utilisation de & pour BEM
  • Opérateurs pour calculs
  • Commentaires organisés

Critères :

  • ✅ Structure organisée en partials
  • ✅ Variables bien utilisées
  • ✅ Nesting approprié (pas trop profond)
  • ✅ Imports dans le bon ordre
  • ✅ Compilation fonctionnelle

Objectif : Maîtriser la syntaxe SCSS fondamentale et créer une structure organisée.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les variables, le nesting, les partials et avez créé une structure SCSS organisée.