Sass-Verschachtelung

Das nächste leistungsstarke Feature ist das Verschachteln. Es ermöglicht uns, einen Selektor innerhalb eines anderen zu verschachteln, um einen besser organisierten und lesbareren Code zu erstellen. Wir können Stile gruppieren und den Code reduzieren, den wir schreiben müssen.

Stellen wir uns vor, dass wir die Website-Navigation erstellen müssen.

Das HTML für diese Navigation sieht wie folgt aus:

99
1
2
3
4
5
6
7
8
9
10
11
12
13
<nav>
  <ul>
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#price">Price</a>
    </li>
  </ul>
</nav>

Da wir neben der Navigation dieselben HTML-Tags (ul, li, a) mehrfach im gesamten Projekt verwenden, müssen wir Verschachtelungsregeln in CSS verwenden, um diesen Elementen genau einige Stile hinzuzufügen. So kann das CSS wie folgt aussehen:

99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
nav {
  background-color: rebeccapurple;
  border-radius: 10px;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding-left: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: aquamarine;
}

nav ul li a:hover {
  text-decoration: underline wavy;
}

Nun, lassen Sie uns sehen, wie Sass unser Leben erleichtern kann. Wir werden all diese Stile in einem Block gruppieren. Der Code wird umgeschrieben zu:

99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
nav {
  background-color: rebeccapurple;
  border-radius: 10px;
  padding: 10px;

  ul {
    list-style: none;
    padding-left: 0;

    li {
      display: inline-block;
      margin: 0 10px;

      a {
        text-decoration: none;
        color: aquamarine;
        
        &:hover {
          text-decoration: underline wavy;
        }
      }
    }
  }
}

Es ist, als würden wir den Stilblock des Kindes in seinen Elternblock verschachteln. Beachten Sie, dass das &-Symbol im &:hover-Selektor verwendet wird, um auf den Elternselektor zu verweisen, in diesem Fall a. Dies ist eine Kurzform, um a:hover zu schreiben, und erleichtert das Schreiben von verschachtelten Selektoren, ohne den Elternselektor mehrfach zu wiederholen.