Nesting (Imbrication)
Structure ton SCSS par hiérarchie comme un arbre de talents.
3.1Le principe de base
Le nesting te permet d'imbriquer tes sélecteurs les uns dans les autres, en suivant la structure de ton HTML.
SCSSscss
// SCSS avec nesting
.carte-sort {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
h3 {
color: #2c3e50;
margin-bottom: 0.5rem;
}
p {
color: #6c757d;
line-height: 1.6;
}
.bouton {
background: #3498db;
color: white;
padding: 0.5rem 1rem;
}
}CSScss
/* CSS généré */
.carte-sort {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
}
.carte-sort h3 {
color: #2c3e50;
margin-bottom: 0.5rem;
}
.carte-sort p {
color: #6c757d;
line-height: 1.6;
}
.carte-sort .bouton {
background: #3498db;
color: white;
padding: 0.5rem 1rem;
}3.2Le sélecteur parent (&)
Le symbole & représente le sélecteur parent. C'est ton outil le plus puissant pour gérer les états (hover, focus, active) et les modificateurs.
SCSSscss
.bouton-magie {
background: #9b59b6;
color: white;
transition: all 0.3s ease;
// États au survol
&:hover {
background: #8e44ad;
transform: translateY(-2px);
}
// État actif
&:active {
transform: translateY(0);
}
// Modificateur (variante)
&--dangereux {
background: #e74c3c;
&:hover {
background: #c0392b;
}
}
// Contexte (dans un autre élément)
.mode-sombre & {
border: 1px solid #555;
}
}3.3Nesting avec les pseudo-éléments
Les pseudo-éléments ::before et ::after s'intègrent parfaitement dans le nesting.
SCSSscss
.bouton-enchante {
position: relative;
background: #3498db;
color: white;
// Ajout d'une aura magique
&::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #f39c12, #e74c3c, #9b59b6);
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
&:hover::before {
opacity: 1;
}
}3.4Nesting avec les media queries
Tu peux imbriquer les media queries directement dans tes sélecteurs. Très pratique pour le responsive !
SCSSscss
.menu-principal {
display: flex;
gap: 2rem;
// Comportement sur tablette
@media (max-width: 768px) {
flex-direction: column;
gap: 1rem;
}
// Comportement sur mobile
@media (max-width: 480px) {
padding: 0.5rem;
.lien {
font-size: 0.9rem;
}
}
}3.5Limites et bonnes pratiques
Le nesting c'est puissant, mais attention à ne pas abuser ! Voici les règles d'or :
SCSSscss
// ❌ Trop profond (4 niveaux) = CSS lourd et difficile à maintenir
.page {
.contenu {
.section {
.carte {
.titre {
// Trop imbriqué ! Le navigateur doit vérifier 5 sélecteurs
}
}
}
}
}
// ✅ Mieux organisé = CSS plus léger et plus maintenable
.page-contenu {
padding: 2rem;
}
.section-carte {
margin-bottom: 2rem;
.titre {
font-size: 1.5rem;
}
}3.6Combinaisons avec les sélecteurs
Le nesting fonctionne avec tous les sélecteurs CSS : classes, IDs, attributs, pseudo-classes...
SCSSscss
.formulaire-contact {
// Sélecteur d'attribut
input[type="email"] {
border-color: #3498db;
}
// Pseudo-classe
input:focus {
outline: 2px solid #3498db;
outline-offset: 2px;
}
// Sélecteur adjacent
label + input {
margin-top: 0.25rem;
}
// Sélecteur d'enfant direct
> .champ-obligatoire {
position: relative;
&::after {
content: '*';
color: #e74c3c;
}
}
}