Imbrication

Depuis peu, le CSS permet d’imbriquer des règles directement, sans SCSS. Cela rend le code plus proche de la structure HTML.

1
<div class="card">
2
  <h2>Titre</h2>
3
  <p>Un texte de présentation</p>
4
  <a href="#">Lire plus</a>
5
</div>
1
.card {
2
  padding: 1rem;
3
  border: 1px solid #ccc;
4
}
5
6
.card h2 {
7
  font-size: 1.5rem;
8
}
9
10
.card a {
11
  color: blue;
12
}
13
14
.card a:hover {
15
  color: darkblue;
16
}
Exemple CSS avec imbrication
1
.card {
2
  padding: 1rem;
3
  border: 1px solid #ccc;
4
5
  h2 {
6
    font-size: 1.5rem;
7
  }
8
9
  a {
10
    color: blue;
11
12
    &:hover {
13
      color: darkblue;
14
    }
15
  }
16
}
Ici, le & représente le parent (.card a), ce qui permet d’écrire plus lisiblement.



    
Titre

    
Un texte de présentation

    Lire plus



Imbrication